CanvasRenderingContext2D.fillStyle

CanvasRenderingContext2D.fillStyle 是Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 (黑色)。

参见  Canvas Tutorial 的 Applying styles and color 章节。

语法

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;

选项

color
DOMString 字符串,被转换成 CSS <color> 颜色值.
gradient
CanvasGradient 对象 (线性渐变或者放射性渐变).
pattern
CanvasPattern 对象 (可重复图像)。

示例

使用 fillStyle 属性设置不同的颜色

这是一段简单的代码片段,使用 fillStyle 属性设置不同的颜色。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

修改下面的代码并在线查看canvas的变化:

fillStyle 使用 for 循环的例子

在这个例子中, 我们使用两个 for 循环绘制一个矩形表格,每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图,其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的RGB颜色,并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道,你能生成各种各样的调色板。通过逐步地增加,你能实现类似 Photoshop 的调色板。

var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
  for (var 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);
  }
}

结果看起来像是这样的:

ScreenshotLive sample

规格描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.fillStyle
Living Standard

浏览器兼容性

BCD tables only load in the browser

  • 支持 WebKit- 和 Blink-based 的浏览器中, 有一个不标准的、被反对的方法 ctx.setFillColor() 已经实现。
    setFillColor(color, optional alpha);
    setFillColor(grayLevel, optional alpha);
    setFillColor(r, g, b, a);
    setFillColor(c, m, y, k, a);
    

参见