CanvasRenderingContext2D: createRadialGradient() 方法

基线广泛可用

此功能已十分成熟，可在多种设备和浏览器版本上运行。自 2015 年 7 月.

报告反馈

CanvasRenderingContext2D.createRadialGradient() 方法是 Canvas 2D API 的方法，它使用两个圆圈的大小和坐标创建一个径向渐变。

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

语法

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

createRadialGradient(x0, y0, r0, x1, y1, r1)

`createRadialGradient()` 方法由六个参数指定，三个参数定义渐变的起点圆圈，三个参数定义终点圆圈。

参数: x0
起点圆圈的 x 轴坐标。: y0
起点圆圈的 y 轴坐标。: r0
起点圆圈的半径。必须为非负且有限。: x1
终点圆圈的 x 轴坐标。: y1
终点圆圈的 y 轴坐标。: r1

终点圆圈的半径。必须为非负且有限。

返回值

使用指定的两个圆圈初始化的径向 `CanvasGradient`。

异常: NotSupportedError DOMException
当参数中传递了非有限值时抛出。: IndexSizeError DOMException

示例

当参数中传递了负半径时抛出。

用径向渐变填充矩形

HTML

此示例使用 createRadialGradient() 方法初始化径向渐变。然后创建渐变两个圆圈之间的三个颜色停止点。最后，渐变被分配给画布上下文，并呈现到填充的矩形上。

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// Add three color stops
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);