HTML Canvas 漸變
HTML Canvas 漸變
漸變允許您顯示兩個或多個指定顏色之間的平滑過渡。
漸變可用於填充矩形、圓形、線條、文字等。
有兩種方法用於建立漸變
-
createLinearGradient()- 建立線性漸變 -
createRadialGradient()- 建立徑向/圓形漸變
createLinearGradient() 方法
createLinearGradient() 方法用於定義線性漸變。
線性漸變沿線性模式（水平/垂直/對角線）改變顏色。
createLinearGradient() 方法具有以下引數
| 引數 | 描述 |
|---|---|
| x0 | 必需。 起始點的 x 座標 |
| y0 | 必需。 起始點的 y 座標 |
| x1 | 必需。 終點的 x 座標 |
| y1 | 必需。 終點的 y 座標 |
漸變物件需要兩個或多個顏色停止點。
addColorStop() 方法指定顏色停止點及其在漸變中的位置。位置可以在 0 和 1 之間。
要使用漸變，請將其分配給 fillStyle 或 strokeStyle 屬性，然後繪製形狀（矩形、圓形、形狀或文字）。
示例
建立具有兩個顏色停止點的線性漸變；漸變起始點的淺藍色，漸變終點的深藍色。然後，用漸變填充矩形
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立線性漸變
const grad=ctx.createLinearGradient(0,0, 280,0);
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.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用漸變填充帶邊框的矩形
ctx.lineWidth = 10;
ctx.strokeStyle = grad;
ctx.strokeRect(10,10,280,130);
</script>
自己動手試一試 »
示例
建立具有三個顏色停止點的線性漸變，漸變起始點的淺藍色，漸變中間點的紫色，以及漸變終點的深藍色。然後，用漸變填充矩形
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立線性漸變
const grad=ctx.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(0.5, "purple");
grad.addColorStop(1, "darkblue");
// 用漸變填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
自己動手試一試 »
垂直線性漸變
水平漸變從左到右，透過改變 x 軸上的引數（x1 和 x2）建立。上面的示例都是水平線性漸變。
垂直漸變從上到下，透過改變 y 軸上的引數（y1 和 y2）建立。
示例
透過改變 y 軸上的引數值（更改 y2）來建立垂直線性漸變
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立線性漸變
const grad=ctx.createLinearGradient(0,0, 0,130);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用漸變填充矩形
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
自己動手試一試 »
對角線性漸變
對角漸變透過改變 x 軸和 y 軸上的引數來建立。
示例
透過改變 x 軸和 y 軸上的引數（更改 x2 和 y2）來建立對角線性漸變
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立線性漸變
const grad=ctx.createLinearGradient(0,0, 280,130);
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.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用漸變填充圓形
ctx.beginPath();
ctx.arc(145, 75, 65, 0, 2 * Math.PI);
ctx.fillStyle = grad;
ctx.fill();
</script>
自己動手試一試 »
用漸變填充文字
示例
這裡我們用漸變填充文字
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立線性漸變
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用漸變填充文字
ctx.font = "50px Arial";
ctx.fillStyle = grad;
ctx.fillText("Hello World",10,80);
</script>
自己動手試一試 »
用漸變填充帶邊框的文字
示例
這裡我們用漸變填充帶邊框的文字
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 建立線性漸變
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 用漸變填充帶邊框的文字
ctx.font = "50px Arial";
ctx.strokeStyle = grad;
ctx.strokeText("Hello World",10,80);
</script>
自己動手試一試 »
