之前介绍绘制的文章中,在绘制路径和填充路径时只用到了默认的颜色(黑色)。
如果想要给图形上色,有两个重要的属性可以做到。
// 设置或返回用于填充绘画的颜色、渐变或模式。
// color:指示绘图填充色的 CSS 颜色值。默认值是 #000000。
// gradient:用于填充绘图的渐变对象(线性或放射性)
// pattern:用于填充绘图的 pattern 对象
context.fillStyle=color|gradient|pattern;
// 设置或返回用于笔触的颜色、渐变或模式。
// color:指示绘图填充色的 CSS 颜色值。默认值是 #000000。
// gradient:用于填充绘图的渐变对象(线性或放射性)
// pattern:用于填充绘图的 pattern 对象
context.strokeStyle=color|gradient|pattern;
// 以 color 作为填充有多种形式:
// 1. 使用颜色字符串填充
context.fillStyle = "red";
// 2. 使用十六进制数字字符串填充
context.fillStyle = "#FF0000";
// 3. 使用十六进制数字字符串简写形式填充
context.fillStyle = "#F00";
// 4. 使用 RGB 色彩模式设置颜色
context.fillStyle = "rgb(255,0,0)";
// 5. 使用 RGBA 色彩模式设置颜色,它是在 RGB 色彩模式的基础上多了控制 alpha 透明度的参数,取值范围在 1(不透明)~ 0(透明)之间。
context.fillStyle = "rgba(255,0,0,1)";
// 6. 使用 HSL 色彩模式设置颜色,它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。 HSL 即是代表色相(H),饱和度(S),明度(L)三个通道的颜色。
context.fillStyle = "hsl(0,100%,50%)";
// 7. 使用 HSLA 色彩模式设置颜色,它是在 HSL 色彩模式的基础上多了控制 alpha 透明度的参数,取值范围在 1(不透明)~ 0(透明)之间。
context.fillStyle = "hsla(0,100%,50%,1)";
默认情况下,笔触和填充颜色都是黑色。一旦设置了 strokeStyle
或者 fillStyle
的值,那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色,我们需要重新设置 fillStyle
或 strokeStyle
的值。
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
for (var i = 0; i < 20; i++){
for (var j = 0; j < 20; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 225 / 20 * i) + ',' + Math.floor(255 - 225 / 20 * j) + ',0)';
ctx.fillRect(j * 10, i * 10, 10, 10);
}
}
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
for (var i = 0; i < 20; i++){
for (var j = 0; j < 20; j++){
ctx.strokeStyle = 'rgb(' + Math.floor(255 - 225 / 20 * i) + ',' + Math.floor(255 - 225 / 20 * j) + ',0)';
ctx.strokeRect(j * 10, i * 10, 10, 10);
}
}