HTML Canvas - quadraticCurveTo() 方法

HTML Canvas 的 quadraticCurveTo() 方法是 CanvasRenderingContext2D 介面的一部分，用於在 Canvas 元素的當前路徑中新增二次貝塞爾曲線。

它接受一個控制點和一個終點作為方法的引數，並使用點的座標在 Canvas 元素上繪製二次曲線。

語法

以下是 HTML <>Canvas quadraticCurveTo() 方法的語法：

CanvasRenderingContext2D.quadraticCurveTo(p1x, p1y, x, y);

引數

以下是引數列表：

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

返回值

呼叫該方法後，會在 Canvas 元素的當前路徑中新增一條二次貝塞爾曲線。

示例 1

以下示例使用 HTML Canvas quadraticCurveTo() 方法向當前路徑新增一條二次曲線。

<!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.moveTo(50, 50);
      context.quadraticCurveTo(50, 225, 200, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

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

示例 2

以下示例使用 quadraticCurveTo() 方法透過上下文物件在 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');
      context.lineWidth = 5;
      context.beginPath();
      context.moveTo(70, 50);
      context.quadraticCurveTo(200, 125, 100, 150);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面