MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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的变化:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
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);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范描述

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。

参见

文档标签和贡献者

 此页面的贡献者: joenil, ice-i-snow
 最后编辑者: joenil,