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物件