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