CanvasRenderingContext2D.createLinearGradient()
Canvas 2D API 的 CanvasRenderingContext2D.createLinearGradient()
方法会根据两个给定的坐标值所构成的线段创建一个线性渐变。
该方法返回一个线性 CanvasGradient
对象。想要应用这个渐变,需要把这个返回值赋值给 fillStyle
或者 strokeStyle
。
语法
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
createLinearGradient()
方法需要指定四个参数,分别表示渐变线段的开始和结束点。
参数
x0
-
起点的 x 轴坐标。
y0
-
起点的 y 轴坐标。
x1
-
终点的 x 轴坐标。
y1
-
终点的 y 轴坐标。
返回值
CanvasGradient
-
一个根据指定线路初始化的线性
CanvasGradient
对象。
示例
使用线性渐变填充一个矩形
这个例子使用createLinearGradient()
方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后,这个渐变被赋值给上下文对应的属性,实现了对矩形的填充。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
const gradient = ctx.createLinearGradient(20, 0, 220, 0);
// Add three color stops
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);
结果
规范
Specification |
---|
HTML Standard # dom-context-2d-createlineargradient-dev |
浏览器兼容性
BCD tables only load in the browser