深入了解Canvas标签（4）——运用样式与颜色

在 绘制图形 的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。（文/鬼武者）

色彩 Colors

到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle和 strokeStyle。

1. fillStyle = color
2. strokeStyle = color

复制代码

strokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。

您输入的应该是符合 CSS3 颜色值标准 的有效字符串。下面的例子都表示同一种颜色。

1. // 这些 fillStyle 的值均为 '橙色'
2. ctx.fillStyle = "orange";
3. ctx.fillStyle = "#FFA500";
4. ctx.fillStyle = "rgb(255,165,0)";
5. ctx.fillStyle = "rgba(255,165,0,1)";

复制代码

注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。但如果您遵循上面例子的规范，应该不会有问题。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

fillStyle 示例
附件: Canvas_fillstyle.png

在本示例里，我会再度用两层 for循环来绘制方格阵列，每个方格不同的颜色。结果如右图，但实现所用的代码却没那么绚丽。我用了两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，你还可以绘制出类似 Photoshop 里面的那样的调色板。

查看示例

1. function draw() {
2.   var ctx = document.getElementById('canvas').getContext('2d');
3.   for (var i=0;i<6;i++){
4.     for (var j=0;j<6;j++){
5.       ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + 
6.                       Math.floor(255-42.5*j) + ',0)';
7.       ctx.fillRect(j*25,i*25,25,25);
8.     }
9.   }
10. }

复制代码

strokeStyle 示例
这个示例与上面的有点类似，但这次用到的是 strokeStyle 属性，而且画的不是方格，而是用 arc 方法来画圆。
附件: Canvas_strokestyle.png

查看示例

1. function draw() {   
2.     var ctx = document.getElementById('canvas').getContext('2d');   
3.     for (var i=0;i<6;i++){   
4.       for (var j=0;j<6;j++){   
5.         ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +   
6.                         Math.floor(255-42.5*j) + ')';   
7.         ctx.beginPath();   
8.         ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);   
9.         ctx.stroke();   
10.       }   
11.     }   
12.   }