在上一章节 Canvas 填充矩形 我们学习了如何在 canvas 上绘制一个矩形并填充颜色
但我们绘画的都是一个黑色的填充矩形，能否向现实生活中使用不同的颜色涂鸦呢？比如用不同的画笔填充不同的颜色
canvas 的设计者们肯定也考虑到了这一点，于是提供了 ctx.fillStyle 属性用来定制填充的颜色
ctx.fillStyle 和 ctx.strokeStyle 类似，除了名字和作用不一样之外，其它一模一样
fillStyle 属性
ctx.fillStyle 属性用于设置填充(绘制图形)颜色或者样式
默认值是黑色 #000 (black)
语法
ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;
值
说明
color
一个字符串颜色值，可以是任意的 CSS 颜色值，比如 red 、#000 等
gradient
一个渐变，是一个 CanvasGradient 对象 ( 线性渐变或放射性渐变)，我们后面会讲
pattern
一个绘画对象，是一个 CanvasPattern 对象 ( 可重复的图片)，可以是一张图片，或者另一个画布
下面这些颜色都是 橙色
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)"
例如我们要绘制一个绿色的矩形，可以这么做
运行结果如下
fillStyle 一旦设置就会成为接下来的默认画笔，除非再次调用设置为其它的值
运行结果如下
绘图的顺序
我们在 Canvas 绘制矩形 结尾中有提到，在画板 ( canvas ) 上绘图时遵循的顺序是：后来画的会覆盖之前画的
看看上图的各个图形，就一目了然了
绘制调色器
我们可以使用两层 for 循环来绘制方格阵列，每个方格不同的颜色
用两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变
运行效果如下