CanvasRenderingContext2D
.createLinearGradient()
方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient
对象。
语法
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
参数
x0
- 起点的 x 轴坐标。
y0
- 起点的 y 轴坐标。
x1
- 终点的 x 轴坐标。
y1
- 终点的 y 轴坐标。
返回值
CanvasGradient
- 一个根据指定线路初始化的线性 CanvasGradient 对象。
示例
使用 createLinearGradient
方法
这是一段简单的代码片段,使用 createLinearGradient
方法创建一个指定了开始和结束点的CanvasGradient
对象。创建成功后, 你就可以使用 CanvasGradient.addColorStop()
方法,根据指定的偏移和颜色定义一个新的终止。 如例子所示,渐变允许赋值给当前的fillStyle
,使用fillRect()
方法时,在 canvas 上绘制出效果。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0,0,200,0); gradient.addColorStop(0,"green"); gradient.addColorStop(1,"white"); ctx.fillStyle = gradient; ctx.fillRect(10,10,200,100);
修改下面的代码并在线查看 canvas 的变化:
规范描述
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.createLinearGradient |
Living Standard | |
HTML Canvas 2D Context (W3C) CanvasRenderingContext2D.createLinearGradient |
Recommendation |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |