CanvasRenderingContext2D.createRadialGradient()

CanvasRenderingContext2D.createRadialGradient() 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 CanvasGradient。

语法

CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数

x0

开始圆形的 x 轴坐标。

y0

开始圆形的 y 轴坐标。

r0

开始圆形的半径。

x1

结束圆形的 x 轴坐标。

y1

结束圆形的 y 轴坐标。

r1

结束圆形的半径。

返回值

CanvasGradient

由两个指定的圆初始化的放射性 CanvasGradient 对象。

示例

用径向渐变填充矩形

这是一段简单的代码片段，使用 createRadialGradient 方法创建一个指定了开始和结束圆的 CanvasGradient 对象。一旦创建，你可以使用 CanvasGradient.addColorStop() 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的fillStyle设置成此渐变，当使用fillRect() 方法时，会在 canvas 上绘制出效果，如示例所示。

HTML

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

JavaScript

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

结果

规范描述

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

浏览器兼容性

BCD tables only load in the browser

参见