HTML Canvas - createConicGradient() 方法

HTML Canvas 的 createConicGradient() 方法可用於在給定座標的點周圍建立漸變。

語法

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

CanvasRenderingContext2D.createConicGradient(angle, x, y);

引數

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

序號	引數及說明
1	angle 在 Canvas 形狀上繪製漸變的角度。傳遞的角度僅基於順時針旋轉。
2	x 漸變中心的 x 座標。
3	y 漸變中心的 y 座標。

序號

引數及說明

angle

在 Canvas 形狀上繪製漸變的角度。傳遞的角度僅基於順時針旋轉。

漸變中心的 x 座標。

漸變中心的 y 座標。

返回值

圓錐漸變應用於 Canvas 元素內部的上下文並進行渲染。

示例 1

以下漸變使用 HTML Canvas createConicGradient() 方法，在 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 congradient = context.createConicGradient(45, 95, 95);
      congradient.addColorStop(0, 'blue');
      congradient.addColorStop(0.75, 'brown');
      context.fillStyle = congradient;
      context.fillRect(25, 25, 200, 150);
   </script>
</body>
</html>

輸出

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

示例 2

以下示例透過呼叫 createConicGradient() 方法在 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 congradient = context.createConicGradient(60, 130, 100);
      congradient.addColorStop(0.05, 'violet');
      congradient.addColorStop(0.25, 'blue');
      congradient.addColorStop(0.55, 'green');
      congradient.addColorStop(0.85, 'yellow');
      context.fillStyle = congradient;
      context.fillRect(25, 25, 200, 150);
   </script>
</body>
</html>

輸出

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

html_canvas_colors_and_styles.htm

列印頁面