HTML Canvas - bezierCurveTo() 方法

HTML Canvas 的 bezierCurveTo() 方法是 CanvasRenderingContext2D 介面的一部分，可用於在當前路徑上繪製三次貝塞爾曲線。

它接受兩個控制點和另一個終點作為引數作為參考，並在 Canvas 元素上繪製三次貝塞爾曲線。

語法

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

CanvasRenderingContext2D.bezierCurveTo(p1x, p1y, p2x, p2y, x, y);

引數

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

序號	引數及描述
1	p1x 第一個控制點的 x 座標。
2	p1y 第一個控制點的 y 座標。
3	p2x 第二個控制點的 x 座標。
4	p2y 第二個控制點的 y 座標。
5	x 終點的 x 座標。
6	y 終點的 y 座標。

返回值

當 Canvas 元素的 CanvasRenderingContext2D 介面的上下文物件呼叫此方法時，將繪製一條三次貝塞爾曲線。

示例

以下示例使用 HTML Canvas bezierCurveTo() 方法繪製一條簡單的三次曲線。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="250" height="100" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.lineWidth = 5;
         context.beginPath();
         context.lineWidth = 10;
         context.moveTo(15, 15);
         context.bezierCurveTo(20, 110, 180, 90, 230, 20);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

輸出

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

示例

以下示例透過將控制點和接觸點作為引數傳遞給 bezierCurveTo() 方法來繪製一條貝塞爾曲線。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.lineWidth = 5;
         context.beginPath();
         context.moveTo(100, 100);
         context.bezierCurveTo(150, 15, 300, 150, 350, 75);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

輸出

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

示例

以下示例透過將控制點和接觸點作為引數傳遞給 bezierCurveTo() 方法來繪製一條三次貝塞爾曲線。實現此目的的程式碼如下所示。

<!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');
         context.lineWidth = 5;
         context.beginPath();
         context.strokeStyle = 'blue';
         context.moveTo(25, 25);
         context.bezierCurveTo(100, 150, 150, 25, 250, 150);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面