HTML Canvas - createRadialGradient() 方法

HTML Canvas 的createRadialGradient() 方法是CanvasRenderingContext2D 介面的一部分，可用於建立具有兩個圓的尺寸和座標的徑向漸變。

語法

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

CanvasRenderingContext2D.createRadialGradient(x, y, r, x1, y1, r1);

引數

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

序號	引數及描述
1	x 起始圓的 x 座標。
2	y 起始圓的 y 座標。
3	r 起始圓的半徑。
4	x1 結束圓的 x 座標。
5	y1 結束圓的 y 座標。
6	r1 結束圓的半徑。

返回值

徑向漸變應用於上下文物件的形狀，並呈現到 Canvas 元素。

示例

以下示例演示了使用 HTML Canvas createRadialGradient() 方法透過兩個顏色停止點建立徑向漸變。

<!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 radialgrad = context.createRadialGradient(25, 25, 25, 50, 50, 25);
      radialgrad.addColorStop(0.9, 'pink');
      radialgrad.addColorStop(0.85, 'grey');
      context.fillStyle = radialgrad;
      context.fillRect(10, 10, 200, 150);
   </script>
</body>
</html>

輸出

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

示例

以下示例使用了三個顏色停止點，並將徑向漸變應用於 Canvas 元素中可用的上下文物件。應用樣式的物件將呈現到 Canvas 元素上。

<!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 radialgrad = context.createRadialGradient(25, 25, 50, 100, 80, 50);
      radialgrad.addColorStop(0, 'green');
      radialgrad.addColorStop(0.5, 'purple');
      radialgrad.addColorStop(1, 'cyan');
      context.fillStyle = radialgrad;
      context.fillRect(10, 10, 200, 150);
   </script>
</body>
</html>

輸出

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

html_canvas_colors_and_styles.htm

列印頁面