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 |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.createRadialGradient |
Living Standard |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
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。