Canvas createRadialGradient() 方法
示例
繪製一個填充有徑向/圓形漸變的矩形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 建立徑向漸變
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 繪製一個填充矩形
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 100);
自己動手試一試 »
描述
createRadialGradient() 方法建立一個徑向/圓形漸變物件。
漸變物件可用於填充矩形、圓形、線條、文字等。
漸變物件可用作 strokeStyle 或 fillStyle 屬性的值。
注意
你必須給漸變物件新增一個 顏色停止點 才能使漸變可見。
另請參閱
createLinearGradient() 方法 (建立漸變物件)
addColorStop() 方法 (新增漸變停止點)
fillStyle 屬性 (設定填充顏色/樣式)
strokeStyle 屬性 (設定描邊顏色/樣式)
語法
| context.createRadialGradient(x0, y0, r0, x1, y1, r1) |
引數值
| 引數 | 描述 |
|---|---|
| x0 | 漸變起始圓的 x 座標 |
| y0 | 漸變起始圓的 y 座標 |
| r0 | 起始圓的半徑 |
| x1 | 漸變結束圓的 x 座標 |
| y1 | 漸變結束圓的 y 座標 |
| r1 | 結束圓的半徑 |
返回值
| context.createRadialGradient(x0, y0, r0, x1, y1, r1) |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
createRadialGradient() 在所有現代瀏覽器中都得到支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
