Canvas fillStyle 屬性
示例
為矩形定義紅色填充色
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
更多示例見下文。
描述
fillStyle 屬性設定或返回用於填充圖形的顏色、漸變或圖案。
預設值為 #000000（純黑色）。
語法
| context.fillStyle = 顏色|漸變|圖案 |
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| color | 一個 CSS 顏色值，指示圖形的填充顏色。預設值為 #000000。 | 試一試 » |
| 漸變 | 用於填充圖形的漸變物件（線性或徑向） | |
| pattern | 用於填充圖形的圖案物件 |
更多示例
示例
定義一個（從上到下）漸變作為矩形的填充樣式
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
示例
為矩形定義一個漸變（從左到右）作為填充樣式
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
示例
定義一個從黑到紅再到白的漸變，作為矩形的填充樣式
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
要使用的影像
示例
使用影像填充圖形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
自己動手試一試 »
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
fillStyle() 得到所有現代瀏覽器的支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
