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 方法

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

HTML

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

JavaScript

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

var gradient = ctx.createRadialGradient(100,100,100,100,100,0);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"green");
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);

修改下面的代码并在线查看 canvas 的变化:

规范描述

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

浏览器兼容性

BCD tables only load in the browser

Gecko-specific 注解

  • 从 Gecko 2.0 开始,指定非限制的值会抛出 NOT_SUPPORTED_ERR,用来替代 SYNTAX_ERR
  • 从 Gecko 5.0 开始,指定一个负的半径会抛出 INDEX_SIZE_ERR

参见