CanvasRenderingContext2D: createRadialGradient() 方法
CanvasRenderingContext2D.createRadialGradient() 方法（Canvas 2D API）使用两个圆的大小和坐标来创建一个径向渐变。
此方法返回一个 CanvasGradient 对象。要将其应用于形状，必须先将其赋值给 fillStyle 或 strokeStyle 属性。
注意： 渐变坐标是全局的，即相对于当前坐标空间。当应用于形状时，坐标不相对于形状的坐标。
语法
js
createRadialGradient(x0, y0, r0, x1, y1, r1)
createRadialGradient() 方法有六个参数，前三个定义渐变的起始圆，后三个定义结束圆。
参数
返回值
一个径向 CanvasGradient 对象，使用两个指定的圆进行初始化。
异常
NotSupportedErrorDOMException-
当参数传递了非有限值时抛出。
IndexSizeErrorDOMException-
当参数传递了负半径时抛出。
示例
使用径向渐变填充矩形
本示例使用 createRadialGradient() 方法初始化一个径向渐变。然后，在渐变的两个圆之间创建三个颜色停止点。最后，将渐变赋值给 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);
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-createradialgradient-dev |
浏览器兼容性
加载中…