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