CanvasRenderingContext2D：createConicGradient() 方法
Canvas 2D API 的 CanvasRenderingContext2D.createConicGradient() 方法建立一個圍繞給定座標點的漸變。
此方法返回一個圓錐 CanvasGradient。要將其應用於形狀，必須先將漸變賦值給 fillStyle 或 strokeStyle 屬性。
注意： 漸變座標是全域性的，即相對於當前座標空間。當應用於形狀時，座標不相對於形狀的座標。
語法
js
createConicGradient(startAngle, x, y)
引數
startAngle-
漸變開始的角度，以弧度為單位。角度從從中心點向右水平延伸的線開始，並順時針進行。
x-
漸變中心的 x 軸座標。
y-
漸變中心的 y 軸座標。
返回值
CanvasGradient-
一個圓錐
CanvasGradient。
示例
用圓錐漸變填充矩形
此示例使用 createConicGradient() 方法初始化一個圓錐漸變。然後在中心座標周圍建立五個顏色停止點。最後，將漸變賦值給畫布上下文，並渲染為一個填充矩形。
HTML
html
<canvas id="canvas" width="240" height="240"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Create a conic gradient
// The start angle is 0
// The center position is 100, 100
const gradient = ctx.createConicGradient(0, 100, 100);
// Add five color stops
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);
矩形結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-createconicgradient-dev |
瀏覽器相容性
載入中…