Canvas 填充样式 fillStyle
在上一章节 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)"
例如我们要绘制一个绿色的矩形，可以这么做
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.fillStyle = "green"; ctx.strokeRect(50,50,200,50); </script>
运行结果如下
fillStyle 一旦设置就会成为接下来的默认画笔，除非再次调用设置为其它的值
<!DOCTYPE html> <meta charset="utf-8"> <div style="border:1px solid #ccc"> <canvas id="canvas-2" width="400" height="300"> </canvas> </div> <script> var c = document.getElementById("canvas-2"); var ctx = c.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(0,0,200,200); ctx.fillStyle = "#ccc"; ctx.fillRect(0,0,100,100); ctx.fillStyle = "red"; ctx.fillRect(50,50,100,100); ctx.fillStyle = "#00ff00"; ctx.fillRect(250,250,100,100); </script>
运行结果如下
绘图的顺序
我们在 Canvas 绘制矩形 结尾中有提到，在画板 ( canvas ) 上绘图时遵循的顺序是：后来画的会覆盖之前画的
看看上图的各个图形，就一目了然了
绘制调色器
我们可以使用两层 for 循环来绘制方格阵列，每个方格不同的颜色
用两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变
<!DOCTYPE html> <meta charset="utf-8"> <div style="border:1px solid #ccc"> <canvas id="canvas-3" width="400" height="300"> </canvas> </div> <script> var ctx = document.getElementById('canvas-3').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)'; ctx.fillRect(j*25,i*25,25,25); } } </script>
运行效果如下