HTML Canvas - 路徑元素

路徑只不過是在兩點之間構建/繪製的基本形狀，可以定義為一系列點，由線段、弧、曲線等連線而成，可用於建立不同的形狀。

您可以使用 HTML5 canvas 的 paths2D 介面提供的 method 來繪製路徑。

路徑元素

路徑元素是用於形成路徑的各種基本元素，例如曲線、線和弧。以下是 HTML5 Canvas API 提供的用於繪製各種路徑元素的 method：

序號	Method 及描述
1	moveTo() 我們在使用路徑繪製時使用一個虛擬指標。它始終位於可以使用 moveTo(x, y) method 訪問的指定點。
2	lineTo() 此 method 從虛擬指標到 lineTo() method 中作為引數給出的點繪製一條線。在繪製線之前，我們必須使用 moveTo() 函式將游標傳送到應從其繪製線的起點。
3	arcTo() 此 method 將使用路徑繪製一條弧線。它將兩個點和一個半徑作為引數。弧線從起點到終點繪製，使用半徑進行彎曲。
4	quadraticCurveTo() 此函式將使用一個控制點繪製曲線，該控制點作為參考在兩點之間繪製曲線。
5	bezierCurveTo() 此函式將使用兩個控制點在兩點之間繪製曲線，這兩個控制點確定曲線的結構。

開始和結束路徑

由於繪製路徑涉及許多函式，因此我們使用 method 使用 beginPath() 和 closePath() 分別開始和關閉路徑。下面顯示了一個關於如何在 JavaScript 程式碼中使用路徑的簡單程式碼片段。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
// ..... path operations
context.closePath();

在上面的程式碼中，在 beginPath() 和 closePath() 函式之間編寫的操作構建所需的路徑。關閉路徑後給出的操作不會影響路徑物件，並且通常不會執行。

moveTo 路徑元素

最重要的函式之一，它不提供 Canvas 的任何繪圖，但用於從該點繪製任何形狀，方法是使用 moveTo() 函式。此 method 將虛擬指標移動到作為其引數給出的座標。該 method 定義為

moveTo(x, y)

在透過呼叫 beginPath() 初始化 Canvas 元素後，我們必須呼叫

moveTo()

函式，以便虛擬指標移動到給定的座標。在該點，開始繪圖並構建所需的形狀。

我們必須確保給定的 moveTo() 引數在 Canvas 元素內。如果它在 Canvas 之外，則繪圖將不會顯示，並且隱藏在畫布之外。

示例

以下程式碼使用 Path 2D 元素 method moveTo() 和 lineTo() 將菱形形狀繪製到 Canvas 元素上。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Rhombus</title>
   </head>
   <body onload="myFun();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function myFun() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
               var ctx = canvas.getContext('2d');
               ctx.beginPath();
               ctx.moveTo(300, 100);
               ctx.lineTo(150, 200);
               ctx.lineTo(300, 300);
               ctx.lineTo(450, 200);
               ctx.lineTo(300, 100);
               ctx.fillStyle = "blue";
               ctx.fill()
            }
         }
      </script>
   </body>
</html>

輸出

上面程式碼生成的菱形為

lineTo 路徑元素

lineTo() method 定義線的終點的座標，stroke() 或 fill() method 用於使線在 canvas 元素上可見。讓我們看一個示例來了解該 method 的工作原理。

示例

以下示例演示了 lineTo() method。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>lineTo()</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="line()">
      <canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function line() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5.0;
            context.beginPath();
            context.strokeStyle = 'black';
            context.moveTo(20, 20);
            context.lineTo(250, 20);
            context.stroke();
            context.beginPath();
            context.moveTo(20, 120);
            context.lineTo(250, 120);
            context.stroke();
         }
      </script>
   </body>
</html>

輸出

程式碼生成的輸出為

arcTo 路徑元素

此 method 繪製一條具有給定點的弧線，並使用半徑，透過一條直線連線到前一點。

arc(x, y, radius, startAngle, endAngle, counterclockwise)

arc() method 繪製一個以 (x, y) 為中心的弧線，半徑作為第三個引數給出。弧線從 startAngle 開始，在 endAngle 結束，沿最後一個引數給出的方向前進。

角度是從 X 軸測量的。如果最後一個引數中未給出方向，則預設使用順時針方向。arc() method 中給出的角度僅以弧度為單位。因此，我們必須在將輸入提供給 method 之前將度數轉換為弧度。最後一個引數 counterclockwise 為布林資料型別，如果給出 false，則弧線按順時針方向繪製，如果給出 true，則按逆時針方向繪製。當呼叫 arc() method 時，僅宣告一個路徑，並使用 stroke() 或 fill() 的呼叫進行繪圖，該呼叫根據給定的路徑繪製弧線。

quadraticCurveTo 路徑元素

此 method 使用 point(x, y) 從當前位置到給定的端點繪製二次貝塞爾曲線。曲線是參考由 (p1, p2) 指定的控制點繪製的。二次曲線的示例如下所示。

示例

實現二次曲線的示例如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>quadratic curve</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="curve();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function curve() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(100, 100);
            context.quadraticCurveTo(150, 175, 175, 100);
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

輸出

上面程式碼生成的曲線如下所示。

bezierCurveTo 路徑元素

此 method 使用由 (p1, p2) 和 (p3, p4) 指定的控制點，從端點 (x, y) 的位置繪製三次貝塞爾曲線。

示例

以下示例使用給定的座標和接觸點生成貝塞爾曲線。三次貝塞爾曲線的實現如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bezier curve</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
      </script>
   </head>
   <body onload="curve();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function curve() {
            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>