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 Status Comment
HTML Living Standard
CanvasRenderingContext2D.createRadialGradient
Living Standard

浏览器兼容性

BCD tables only load in the browser

Gecko-specific 注解

  • 从 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)开始, 指定非限制的值会抛出 NOT_SUPPORTED_ERR ,用来替代 SYNTAX_ERR。
  • 从 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)开始,指定一个负的半径会抛出 INDEX_SIZE_ERR。

参见