CanvasRenderingContext2D.fillStyle
CanvasRenderingContext2D.fillStyle
是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000
(黑色)。
参见 Canvas Tutorial 的 Applying styles and color 章节。
语法
ctx.fillStyle = color; ctx.fillStyle = gradient; ctx.fillStyle = pattern;
选项
color
gradient
-
CanvasGradient
对象(线性渐变或者放射性渐变). pattern
-
CanvasPattern
对象(可重复图像)。
示例
改变形状的填充颜色
这是一段简单的代码片段,使用 fillStyle
属性设置不同的颜色。
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
结果
fillStyle
使用 for
循环的例子
在这个例子中,我们使用两个 for
循环绘制一个矩形表格,每个单元格都有不同的颜色。最终的结果图像看起来像屏幕截图,其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的 RGB 颜色,并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道,你能生成各种各样的调色板。通过逐步地增加,你能实现类似 Photoshop 的调色板。
var ctx = document.getElementById('canvas').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);
}
}
结果看起来像是这样的:
Screenshot | Live sample |
---|---|
![]() |
规格描述
Specification |
---|
HTML Standard # dom-context-2d-fillstyle-dev |
浏览器兼容性
BCD tables only load in the browser
WebKit/Blink-specific 注解
- 支持 WebKit- 和 Blink-based 的浏览器中,有一个不标准的、被反对的方法
ctx.setFillColor()
已经实现。setFillColor(color, optional alpha); setFillColor(grayLevel, optional alpha); setFillColor(r, g, b, a); setFillColor(c, m, y, k, a);
参见
- Canvas API
- 接口定义,
CanvasRenderingContext2D
- 此属性使用的值:
<color>
CSS 数据类型CanvasGradient
对象CanvasPattern
对象