HTML Canvas - 使用路徑元素繪製二維圖形

上一頁
下一頁

本章將討論如何使用 HTML5 的各種路徑元素繪製各種二維圖形。

Canvas 元素中使用名為 `rect()` 的方法建立矩形。它使用了路徑的概念，其語法是

rect(x, y, width, height)

此方法繪製一個矩形，其左上角由 (x, y) 指定，並具有給定的寬度和高度。要執行此方法，必須使用引數 x 和 y 呼叫 `moveTo()`，以便指標移動到可以從中繪製矩形的座標。

同樣，我們可以使用這些路徑元素建立其他二維圖形。在 Canvas 元素中使用路徑建立圖形的步驟如下：

  • 步驟 1 - 建立路徑：此步驟通常使用 `beginPath()` 函式完成，該函式建立用於構建實際圖形的路徑。

  • 步驟 2 - 使用繪圖命令繪製到路徑中：要使用 Canvas 繪製圖形，我們使用 `lineTo()` 和 `moveTo()` 等函式來繪製所需的路徑。

  • 步驟 3 - 使用 `stroke` 或 `fill` 方法構造圖形：繪製路徑後，我們使用 `fill()` 和 `stroke()` 方法使生成的路徑圖形更易於理解。然後，我們將使用 `closePath()` 函式完成路徑。

繪製三角形

從數學上講，三條線的交點被認為是一個三角形。它由三條以特定角度相交的線組成。相交的線稱為三角形的頂點。

要繪製三角形，我們必須使用路徑函式。三角形是使用 `lineTo()` 函式透過三條線繪製的。我們首先開始路徑並移動到繪製線的點，然後使用 `lineTo()` 直到形成三角形。我們必須確保提供給函式的座標必須構成一個三角形。我們可以使用所需的函式（例如形狀、漸變等）為形成的三角形新增屬性。

`lineTo()` 函式的語法是

Canvas.lineTo(x, y);

其中涉及的引數是 x 和 y，它們表示要繪製線的點。我們必須首先使用 `moveTo()` 函式初始化起點。

示例

下面的示例使用路徑操作繪製三角形。程式程式碼如下所示

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

輸出

上面程式碼形成的三角形如下所示。我們可以修改座標並建立其他三角形，例如直角三角形和等腰三角形。我們也可以在指令碼末尾新增 `closePath()` 函式。如果我們在指令碼末尾沒有給出 `closePath()`，則路徑仍在執行且未停止。

Drawing Triangles

繪製直線

當兩點以最小距離連線時，形成一條線。它是一個常見的數學形狀，用於繪製幾何圖形中的大多數形狀。

要使用路徑在 HTML5 Canvas 中繪製直線，我們應該使用兩種方法，`moveTo(x, y)` 和 `lineTo(x, y)`。要在 Canvas 上識別線條，我們必須使用 `stroke()` 或 `fill()`。`moveTo()` 方法定義游標在畫布上繪製的位置，而 `lineTo()` 方法定義線條端點的座標，`stroke()` 或 `fill()` 方法用於使線條在畫布元素上可見。除非使用者指定，否則 `stroke()` 或 `fill()` 的顏色為黑色。

用於繪製直線的函式語法如下：

Canvas.moveTo(x,y);

畫布游標從原點移動到點 (x, y)。

Canvas.lineTo(x, y);

從游標點到給定引數點 (x, y) 繪製一條線。

示例

我們將透過一些示例來清晰地理解它。以下示例將在畫布上繪製一個正方形，並使用直線繪製其對角線。實現如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Line-Diagonal</title>
      <style>
         <style>body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="line1();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function line1() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var x = 50;
            var y = 50;
            var width = 200;
            var height = 200;
            context.strokeRect(x, y, width, height);
            context.moveTo(50, 50);
            context.lineTo(250, 250);
            context.stroke();
         }
      </script>
   </body>
</html>

輸出

我們首先使用畫布上的矩形構造了一個正方形，其尺寸如上所示，並從其左上角座標 (x, y) 繪製一條線到右下角座標，新增 x 和 y 值 (x+width, y+height)，因為它們遠離原點。請參考 Canvas 座標以清晰地理解這一點。上面程式碼的輸出如下所示。

Drawing Lines

示例

我們將處理另一個僅繪製直線的示例。讓我們使用直線繪製字母“h”和“i”。我們將使用 `lineWidth()` 和 `strokeStyle()` 使輸出易於理解並使其看起來更具吸引力。程式程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Line-'hI'</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="line2();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function line2() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.lineWidth = 5.0;
            context.beginPath();
            context.strokeStyle = 'green';
            context.moveTo(50, 50);
            context.lineTo(50, 200);
            context.lineTo(50, 100);
            context.lineTo(100, 100);
            context.lineTo(100, 200);
            context.stroke();
            context.beginPath();
            context.strokeStyle = 'green';
            context.moveTo(200, 50);
            context.lineTo(200, 200);
            context.stroke();
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出如下所示。我們可以在 Canvas 元素中使用直線建立文字，但這很難實現。Canvas 還有文字繪圖函式，使操作更容易。我們將在本教程的後面部分使用文字。

Example Drawing Lines

使用直線繪製有趣的星形

我們將使用路徑方法繪製星形。星形可以透過結合一組路徑物件輔助的直線來簡單地繪製。我們必須編寫一個接受輸入並輸出星形的 JavaScript 函式。繪製星形的函式是 `star(R, X, Y, N)`，其中 R 是星形的中心，X 和 Y 是中心座標，N 是星形上需要繪製的尖峰數量。實現如下所示。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Star</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="star();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         var ctx = document.getElementById("canvas").getContext("2d");

         function star(R, X, Y, N) {
            ctx.beginPath();
            ctx.moveTo(X + R, Y);
            for (var i = 1; i <= N * 2; i++) {
               if (i % 2 == 0) {
                  var theta = i * (Math.PI * 2) / (N * 2);
                  var x = X + (R * Math.cos(theta));
                  var y = Y + (R * Math.sin(theta));
               } else {
                  var theta = i * (Math.PI * 2) / (N * 2);
                  var x = X + ((R / 2) * Math.cos(theta));
                  var y = Y + ((R / 2) * Math.sin(theta));
               }
               ctx.lineTo(x, y);
            }
            ctx.closePath();
            ctx.fillStyle = "yellow";
            ctx.fill();
            ctx.fillStyle = "green";
            ctx.stroke();
         }
         star(55, 100, 100, 5);
      </script>
   </body>
</html>

輸出

在畫布上形成的星形如下所示。

Star Shape

繪製弧線

要繪製任何帶有弧線的形狀，我們必須使用兩種可用的方法 `arc()` 和 `arcTo()`。讓我們瞭解每種方法的功能。

使用弧線繪製圓形

我們可以非常輕鬆地使用弧線繪製圓形。繪製圓形的有效方法是使用 `arc()` 和 `beginPath()` 方法。圓形的實現如下所示。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>arc()</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="circle();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function circle() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.beginPath();
            context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
            context.stroke();
         }
      </script>
   </body>
</html>

輸出

這段程式碼使用 `path()` 和 `arc()` 方法在畫布內繪製一個圓形。程式碼的輸出如下所示。

Drawing Arcs

繪製曲線

在數學中，曲線是用於描述連續移動點的抽象路徑。此類路徑是使用方程生成的。

曲線是最常見的數學表示形式，具有許多應用。這些可以使用基於其接觸點的方法在 Canvas 上表示。可以使用 Canvas 繪製的曲線型別是二次和三次貝塞爾曲線。方法如下所示。

二次和三次貝塞爾曲線有何不同？

二次和三次貝塞爾曲線之間的基本區別在於，二次貝塞爾曲線有一個起點和一個終點 (x, y) 和一個控制點，而三次貝塞爾曲線使用兩個控制點和一個終點 (x, y)。

使用這些方法建立複雜形狀可能相當困難，因為我們在編寫程式碼時沒有任何視覺支援。因此，建議不要使用這些方法繪製複雜形狀，除非您精通上述所有方法。

使用曲線繪製簡單的愛心程式

讓我們使用曲線繪製一個簡單的有機愛心形狀。繪製程式碼如下所示。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Heart</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 ctx = canvas.getContext('2d');
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(300, 300);
            ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
            ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
            ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
            ctx.fillStyle = "red";
            ctx.fill();
         }
      </script>
   </body>
</html>

輸出

這段程式碼給出一個紅色的愛心和一條對角線。這條線是由於函式中給出的輸入座標形成的，因為該點位於形狀之外。使用上述程式碼在 Canvas 上繪製的心形為

Simple Heart Program

形狀組合

我們可以在 Canvas 元素上繪製一個或多個形狀的組合。唯一需要注意的是給定的座標與所需的輸出相匹配。由於我們組合了一個或多個形狀，因此必須相應地賦值。請參考網格以瞭解分配座標值的概念。

使用曲線和弧線繪製鴨子的臉

我們將使用圓形和弧線繪製一個簡單的鴨子臉。臉和眼睛使用圓形繪製，嘴巴使用弧線繪製。使用程式碼的實現如下所示。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>duck smile</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="smile();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function smile() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
               var ctx = canvas.getContext('2d');
               ctx.beginPath();
               ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
               ctx.moveTo(110, 75);
               ctx.fillStyle = "red";
               ctx.fill();
               ctx.arc(75, 75, 35, 0, Math.PI, false);
               ctx.moveTo(65, 65);
               ctx.fillStyle = "yellow";
               ctx.fill();
               ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
               ctx.moveTo(95, 65);
               ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
               ctx.stroke();
            }
         }
      </script>
   </body>
</html>

輸出

The Face of The Duck

Path 2D

我們可以使用任意數量的路徑和命令在畫布上繪製物件。為了簡化操作，Canvas 引入了 Path2D，它可以幫助我們輕鬆地構建繪圖。讓我們在一個程式中實現 Path2D 物件。

示例

以下示例使用 Path2D 物件將一個圓形插入正方形中。實現如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Path2D</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
      <script>
         function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
               var ctx = canvas.getContext('2d');
               var rectangle = new Path2D();
               rectangle.rect(100, 100, 100, 100);
               var circle = new Path2D();
               circle.arc(150, 150, 25, 0, 2 * Math.PI);
               ctx.stroke(rectangle);
               ctx.fill(circle);
            }
         }
      </script>
   </head>
   <body onload="draw();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
   </body>
</html>

輸出

程式碼的輸出如下所示

Path 2D
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.