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(黑色)。

备注: 想要了解更多填充和描边样式的示例,请参阅 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 循环来绘制一个矩形网格,每个矩形具有不同的填充颜色。为了实现这一点,我们使用变量 ij 来为每个正方形生成唯一的 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
# dom-context-2d-fillstyle-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fillStyle

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

在基于 WebKit 和 Blink 的浏览器中,除了这个属性之外还实现了一个不标准的、被弃用的 ctx.setFillColor() 方法。

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

参见