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 |
瀏覽器相容性
載入中…