CanvasRenderingContext2D:createRadialGradient() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.createRadialGradient() 方法使用两个圆的坐标和大小绘制径向渐变。

这个方法返回 CanvasGradient。要将其应用于形状,必须首先将渐变赋值给 fillStylestrokeStyle 属性。

备注: 渐变坐标是全局的,即相对于当前的坐标空间。当应用于形状时,这些坐标并不是相对于形状本身的坐标。

语法

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

createRadialGradient() 方法由六个参数指定,三个参数定义渐变的起始圆,另外三个参数定义渐变的结束圆。

参数

x0

开始圆形的 x 轴坐标。

y0

开始圆形的 y 轴坐标。

r0

开始圆形的半径。必须为非负有限值。

x1

结束圆形的 x 轴坐标。

y1

结束圆形的 y 轴坐标。

r1

结束圆形的半径。必须为非负有限值。

返回值

CanvasGradient

一个使用指定的两个圆初始化的径向 CanvasGradient

异常

NotSupportedError DOMException

当在参数中传递非有限值时抛出。

IndexSizeError DOMException

当在参数追踪传递负半径时抛出。

示例

用径向渐变填充矩形

此示例使用 createRadialGradient() 方法初始化一个径向渐变。然后在渐变的两个圆之间创建了三个色标。最后,将渐变赋值给画布上下文,并将其渲染到一个填充的矩形上。

HTML

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

JavaScript

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

// 创建一个径向渐变
// 内圆位于 x=110、y=90,半径为 30
// 外圆位于 x=100,、y=100,半径为 70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// 添加三个色标
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// 设置填充样式并绘制矩形
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

结果

规范

Specification
HTML
# dom-context-2d-createradialgradient-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createRadialGradient

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见