CanvasRenderingContext2D: fillStyle 属性
CanvasRenderingContext2D.fillStyle 属性是 Canvas 2D API 的一部分，用于指定绘制形状内部时使用的颜色、渐变或图案。默认样式是 black。
值
以下之一：
- 一个被解析为 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);
}
}
结果如下所示
规范
| 规范 |
|---|
| HTML # dom-context-2d-fillstyle-dev |
浏览器兼容性
加载中…
WebKit/Blink 特有说明
在 WebKit 和 Blink 浏览器中，除了此属性之外，还实现了非标准且已弃用的 ctx.setFillColor() 方法。
js
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对象