CanvasRenderingContext2D.fillStyle

了解CanvasRenderingContext2D.fillStyle

简介

CanvasRenderingContext2D.fillStyle可以给Canvas中的各种图形填充样式。默认填充样式是黑色#000。

语法

context.fillStyle = color;
context.fillStyle = gradient;
context.fillStyle = pattern;

其中：

color

使用纯色填充，支持RGB，HSL，RGBA，HSLA以及HEX色值。

gradient

使用渐变填充，可以是线性渐变或者径向渐变。

pattern

使用纹理填充。由于图片也能作为纹理，因此fillStyle也能填充普通的位图，可参见下面的案例。

案例

1. 色值填充

请选择色值（都是红色）：

代码：

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

var canvasColor = document.getElementById('canvasColor');
var contextColor = canvasColor.getContext('2d');

contextColor.fillStyle = 'RGB(255, 0, 0)';
contextColor.fillRect(10, 10, 100, 100);

实时效果：

2. 渐变填充-线性

自古红蓝出cp，所以我们借助createLinearGradient() API实现一个从红色到绿色的线性渐变填充效果，代码如下：

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

var canvasLinear = document.getElementById('canvasLinear');
var contextLinear = canvasLinear.getContext('2d');
// 创建线性渐变对象
var gradientLinear = contextLinear.createLinearGradient(0, 0, 0, 100);
gradientLinear.addColorStop(0, 'red');
gradientLinear.addColorStop(1, 'green');
// 填充线性渐变
contextLinear.fillStyle = gradientLinear;
contextLinear.fillRect(10, 10, 100, 100);

实时效果：

3. 渐变填充-径向

自古红蓝出cp +1，所以我们借助createRadialGradient() API实现一个从红色到绿色的径向渐变填充效果，代码如下：

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

var canvasRadial = document.getElementById('canvasRadial');
var contextRadial = canvasRadial.getContext('2d');
// 创建径向渐变对象，半径50
var gradientRadial = contextRadial.createRadialGradient(60, 60, 0, 60, 60, 50);
gradientRadial.addColorStop(0, 'red');
gradientRadial.addColorStop(1, 'green');
// 填充径向渐变
contextLinear.fillStyle = gradientRadial;
contextLinear.fillRect(10, 10, 100, 100);

实时效果：

4. 图案填充

我们找一张好看的底纹图片作为图案进行填充，找啊找啊找，就下面这个素材吧：

相关代码如下：

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

var canvasPattern = document.getElementById('canvasPattern');
var contextPattern = canvasPattern.getContext('2d');
// 创建图案对象
var imagePattern = document.createElement('img');
imagePattern.onload = function () {
    // 缩放原始图片到50*50大小
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = 50;
    var context = canvas.getContext('2d');
    // 通过drawImage()方法缩放
    context.drawImage(this, 0, 0, 50, 50);
    // 把这个创建的canvas图形作为图案使用
    var pattern = contextPattern.createPattern(canvas, 'repeat');
    // 填充图案
    contextPattern.fillStyle = pattern;
    contextPattern.fillRect(10, 10, 100, 100);
};
imagePattern.src = './pattern.jpg';

实时效果：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:04