HTML Canvas 徑向漸變
createRadialGradient() 方法
createRadialGradient() 方法用於定義一個徑向/圓形漸變。
徑向漸變由兩個假想圓定義：一個起始圓和一個結束圓。漸變從起始圓開始，向結束圓移動。
createRadialGradient() 方法具有以下引數：
| 引數 | 描述 |
|---|---|
| x0 | 必需。起始圓的 x 座標 |
| y0 | 必需。起始圓的 y 座標 |
| r0 | 必需。起始圓的半徑 |
| x1 | 必需。結束圓的 x 座標 |
| y1 | 必需。結束圓的 y 座標 |
| r1 | 必需。結束圓的半徑 |
漸變物件需要兩個或更多顏色停止點。
addColorStop() 方法指定顏色停止點及其在漸變中的位置。位置可以在 0 和 1 之間。
要使用漸變，請將其分配給 fillStyle 或 strokeStyle 屬性，然後繪製形狀（矩形、圓形、形狀或文字）。
示例
使用兩個顏色停止點建立徑向/圓形漸變；起始圓為淺藍色，結束圓為深藍色。起始圓的中心位於 (150,75) 位置，半徑為 15 畫素。結束圓的中心位於 (150,75) 位置，半徑為 150 畫素。然後，用漸變填充矩形。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立漸變
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// 用漸變填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己動手試一試 »
示例
在這裡，我們將結束圓的半徑設定為一個較小的數字 (100)，可以看到徑向/圓形漸變會變小。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立漸變
const grad=ctx.createRadialGradient(150,75,15,150,75,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// 用漸變填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己動手試一試 »
示例
在這裡，我們移動結束圓的中心點以獲得新的外觀。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立漸變
const grad=ctx.createRadialGradient(150,75,15,180,95,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// 用漸變填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己動手試一試 »
示例
在這裡，我們向漸變新增一個額外的顏色停止點以獲得新的外觀。
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立漸變
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(0.3,"pink");
grad.addColorStop(1,"darkblue");
// 用漸變填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
自己動手試一試 »
