HTML Canvas - createLinearGradient() 方法

HTML Canvas 的createLinearGradient() 方法是 Canvas 2D API 的CanvasRenderingContext2D 介面的一部分，用於沿給定座標建立漸變。

語法

以下是 HTML Canvas createLinearGradient() 方法的語法：

CanvasRenderingContext2D.createLinearGradient(x, y, x1, y1);

引數

以下是此方法的引數列表：

序號	引數及描述
1	x 起始點的 x 座標。
2	y 起始點的 y 座標。
3	x1 終點的 x 座標。
4	y1 終點的 y 座標。

返回值

繪製一條指定線的線性漸變，應用於畫布元素內繪製的形狀。

示例

以下示例使用 HTML Canvas createLinearGradient() 方法，將簡單的漸變圖案繪製到畫布元素上繪製的矩形。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var lineargrad = context.createLinearGradient(50, 50, 100, 100);
      context.fillStyle = lineargrad;
      lineargrad.addColorStop(0.05, 'red');
      lineargrad.addColorStop(0.95, 'orange');
      context.fillRect(25, 25, 150, 120);
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為：

示例

以下示例使用三種顏色，使用上下文物件在畫布元素上繪製的矩形新增漸變樣式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var lineargrad = context.createLinearGradient(70, 50, 180, 110);
      context.fillStyle = lineargrad;
      lineargrad.addColorStop(0.25, 'yellow');
      lineargrad.addColorStop(0.5, 'orange');
      lineargrad.addColorStop(0.75, 'red');
      context.fillRect(25, 20, 200, 120);
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為：

html_canvas_colors_and_styles.htm

列印頁面