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 |
