CanvasRenderingContext2D: createLinearGradient() 方法

基线广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本上都能正常工作。它自 2015 年 7 月.

报告反馈

The gradient transitions colors along the gradient line, starting at point x0, y0 and going to x1, y1, even if those points extend the gradient line beyond the edges of the element on which the gradient is drawn.

**CanvasRenderingContext2D.createLinearGradient()** 方法是 Canvas 2D API 的一部分，它沿连接两个给定坐标的直线创建渐变。

此方法返回一个线性 CanvasGradient。要将其应用于形状，必须先将渐变分配给 fillStyle 或 strokeStyle 属性。

语法

**注意：** 渐变坐标是全局的，即相对于当前坐标空间。当应用于形状时，坐标**不**相对于形状的坐标。

createLinearGradient(x0, y0, x1, y1)

`createLinearGradient()` 方法由四个参数定义，这些参数定义了渐变线的起点和终点。

参数: x0
起点的 x 轴坐标。: y0
起点的 y 轴坐标。: x1
终点的 x 轴坐标。: y1

终点的 y 轴坐标。

返回值

使用指定线初始化的线性 `CanvasGradient`。

异常: NotSupportedError DOMException

示例

当将非有限值作为参数传递时抛出。

用线性渐变填充矩形

HTML

此示例使用 createLinearGradient() 方法初始化线性渐变。然后创建渐变起点和终点之间的三个颜色停止点。最后，将渐变分配给画布上下文，并将其渲染到填充的矩形中。

<canvas id="canvas"></canvas>

JavaScript

**注意：** 渐变坐标是全局的，即相对于当前坐标空间。当应用于形状时，坐标**不**相对于形状的坐标。

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