html5 canvas 渐变_CanvasGradient

一、canvas 渐变 CanvasGradient 对象

1.线性渐变对象

CanvasRenderingContext2D.createLinearGradient()可以用来创建线性渐变对象。

 如果渐变坐标在Canvas外部，也只会显示画布内的渐变效果。

语法

context.createLinearGradient(x0, y0, x1, y1);

返回值是CanvasGradient对象。

参数

各个参数含义和作用如下：

x0Number

渐变起始点横坐标。

y0Number

渐变起始点纵坐标。

x1Number

渐变结束点横坐标。

y1Number

渐变结束点纵坐标。

线性渐变效果比较好脑补，就是从坐标点[x0, y0]到坐标点[x1, y1]的位置画一条线，然后整个渐变色带与与这条线垂直。

 

案例：

var context = canvas.getContext('2d');
// 创建渐变
var gradient = context.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');
// 设置填充样式为渐变
context.fillStyle = gradient;
// 左上角和右下角分别填充2个矩形
context.fillRect(10, 10, 160, 60);
context.fillRect(120, 80, 160, 60);

 

 

 

2.径向渐变对象

CanvasRenderingContext2D.createRadialGradient()用来创建径向渐变。和CSS3的径向渐变有所不同的是，在Canvas中，径向渐变的起始点由两个圆环坐标构成，而非点坐标。

语法

context.createRadialGradient(x0, y0, r0, x1, y1, r1);

返回值是CanvasPattern对象。

参数

各个参数含义和作用如下：

x0Number

起始圆的横坐标。

y0Number

起始圆的纵坐标。

r0Number

起始圆的半径。

x1Number

结束圆的横坐标。

y1Number

结束圆的纵坐标。

r1Number

结束圆的半径。

案例：

var context = canvas.getContext('2d');
// 创建一个起始圆半径为0的径向渐变对象
var gradient = context.createRadialGradient(120, 60, 0, 120, 60, 60);
// 设置起止颜色
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');
// 矩形填充
context.fillStyle = gradient;
context.fillRect(0, 0, 240, 120);

 

 

 

二、CanvasGradient方法

CanvasGradient.addColorStop()方法可以给渐变添加新的渐变点。

语法

gradient.addColorStop(offset, color)

参数

各个参数含义和作用如下：

offsetNumber

渐变点相对于整个渐变范围的偏移，范围是0-1。

colorString

渐变点的颜色值。只要能被正确解析为CSS颜色的值都是合法的。

var context = canvas.getContext('2d');
// 创建渐变
var gradient = context.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');
// 设置填充样式为渐变
context.fillStyle = gradient;
// 中间位置填充个矩形
context.fillRect(120, 80, 160, 60);

 

 

 

更多参考：

https://www.cnblogs.com/-nothing-/p/5039537.html

html5 canvas 路径渲染_画线

html5 canvas 文本渲染

html5 canvas 简介