CanvasRenderingContext2D: fillStyle 属性

基线 广泛可用

此功能已得到充分确立，并在许多设备和浏览器版本上都能正常工作。它自以下时间起在所有浏览器中都可用： 2015 年 7 月.

CanvasRenderingContext2D.fillStyle 属性是 Canvas 2D API 的一个属性，它指定在形状内部使用的颜色、渐变或图案。默认样式为 #000（黑色）。

注意：有关填充和描边样式的更多示例，请参阅 应用样式和颜色，该示例位于 Canvas 教程 中。

值

以下选项之一

示例

更改形状的填充颜色

此示例将蓝色填充颜色应用于矩形。

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

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

在基于 WebKit 和 Blink 的浏览器中，除了此属性之外，还实现了非标准且已弃用的方法 ctx.setFillColor()。

js
setFillColor(color, /* (optional) */ alpha);
setFillColor(grayLevel, /* (optional) */ alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);

另请参阅