CanvasRenderingContext2D.createLinearGradient()

了解CanvasRenderingContext2D.createLinearGradient()

简介

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

而不是相对于填充元素计算的。，这里的渐变坐标是全局的，需要注意的是

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

语法

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

返回值是CanvasGradient对象。

参数

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

x0

Number

渐变起始点横坐标。

y0

Number

渐变起始点纵坐标。

x1

Number

渐变结束点横坐标。

y1

Number

渐变结束点纵坐标。

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

案例

演示下最简单的头尾二色渐变，以及渐变坐标的全局特性，如下JavaScript代码：

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);

实时效果如下：

很直观展示了渐变坐标是全局的，而不是相对于填充元素（例如这里的矩形）。

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

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