CanvasRenderingContext2D:fillStyle 属性
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Canvas 2D API 的 CanvasRenderingContext2D.fillStyle
属性指定用于形状内部的颜色、渐变或图案。默认样式为 #000
(黑色)。
值
可以是以下之一:
- 作为 CSS
<color>
值解析的字符串。 CanvasGradient
对象(线性或径向渐变)。CanvasPattern
对象(重复的图像)。
示例
改变形状的填充颜色
此示例将一个蓝色填充色应用到一个矩形上。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
结果
使用循环创建多种填充颜色
在这个示例中,我们使用两个 for
循环来绘制一个矩形网格,每个矩形具有不同的填充颜色。为了实现这一点,我们使用变量 i
和 j
来为每个正方形生成唯一的 RGB 颜色,并且只修改红色和绿色的值。(蓝色通道的值是固定的。)通过修改通道的值,你可以生成各种颜色的调色板。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
for (let i = 0; i < 6; i++) {
for (let 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);
}
}
结果如下所示:
规范
Specification |
---|
HTML Standard # dom-context-2d-fillstyle-dev |
浏览器兼容性
BCD tables only load in the browser
WebKit/Blink-specific 注解
在基于 WebKit 和 Blink 的浏览器中,除了这个属性之外还实现了一个不标准的、被弃用的 ctx.setFillColor()
方法。
js
setFillColor(color, /* (可选) */ alpha);
setFillColor(grayLevel, /* (可选) */ alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);
参见
-
定义此属性的接口:
CanvasRenderingContext2D
-
此属性使用的值:
<color>
CSS 数据类型CanvasGradient
对象CanvasPattern
对象