HTML 畫布 - 繪製二維圖形

到目前為止，我們已經瞭解瞭如何使用屬性繪製畫布元素。現在我們將構建簡單的二維圖形並在畫布元素內渲染它們。畫布元素僅支援兩種基本圖形，即**矩形**和**路徑**，所有其他圖形都可以輕鬆地透過它們繪製。有很多繪圖函式可用，這使得從路徑構建所有剩餘圖形更容易。

HTML5 畫布可用於繪製二維圖形，這些圖形進一步用於開發圖形物件。可以使用畫布元素繪製各種形狀，包括多邊形和曲線等複雜形狀。可以使用畫布繪製的每種形狀都是使用基本的繪圖功能（如填充和描邊）繪製的。這些功能幫助我們向空心的二維圖形新增圖形，並建立美麗的視覺化效果。在畫布上繪製圖形之前，我們必須瞭解網格概念才能有效地構建圖形形狀。可以使用以下步驟訪問畫布元素以繪製各種形狀

找到畫布元素。
使用 JavaScript 建立一個繪圖物件，以便在畫布元素內繪製。
使用指令碼物件在畫布上繪製。

幾乎所有二維圖形都可以使用畫布元素繪製，該元素可以透過一些常用函式和事件偵聽器（如漸變、顏色等）進一步設定樣式。這些有助於提高使用者互動性和視覺內容理解。

可以使用畫布元素繪製的形狀有：

矩形
正方形（使用矩形函式）
圓形
橢圓
三角形
曲線
直線
弧線

畫布座標空間（網格）

要使用畫布元素繪製任何形狀，我們必須瞭解網格的概念。網格顯示畫布元素的結構表示，並幫助我們瞭解如何在畫布中插入形狀。整個畫布元素被劃分為邊長為 1 畫素的正方形。考慮外部畫布元素的座標以便在畫布的不同位置繪製元素。形狀通常被插入到畫布中，這樣它們的座標位於原點和畫布寬度和高度之間。以下是網格的影像以及如何在畫布元素中插入正方形。

通常，畫布內的一個單位被認為是 1 畫素。此網格的原點位於左上角，座標為 (0,0)。所有元素都是使用此原點和左下角座標（畫布寬度、畫布高度）放置的。因此，畫布元素內綠色正方形左上角的位置從左側 x 畫素和從頂部 y 畫素，座標為 (x, y)。

使用 HTML5 畫布繪製矩形

矩形可以透過兩種方式繪製。第一種方法是使用四條線（每條線分別表示矩形的寬度和高度），這使得它複雜且不通用。繪製矩形的另一種方法是使用可用的函式。透過考慮形狀的座標，可以使用三個函式使用畫布繪製矩形。我們可以使用三個函式繪製矩形，即

序號	方法和說明
1	fillRect(x, y, width, height) 此函式建立一個填充的矩形。
2	strokeRect(x, y, width, height) 此函式建立一個描邊/空心矩形。
3	clearRect(x, y, width, height) 此函式建立一個透明矩形。

序號

方法和說明

fillRect(x, y, width, height)

此函式建立一個填充的矩形。

strokeRect(x, y, width, height)

此函式建立一個描邊/空心矩形。

clearRect(x, y, width, height)

此函式建立一個透明矩形。

每個函式都用於建立/繪製不同型別的矩形。函式中涉及的引數是

**（X，Y）** - 與原點的距離。繪製矩形的起點。
**寬度** - 要繪製的矩形的寬度。
**高度** - 要繪製的矩形的高度。

下面實現了每個矩形函式以及其功能程式碼。

建立填充矩形

使用上述函式，我們可以繪製一個填充的矩形。它以起始座標 (x, y) 和矩形的寬度和高度作為引數。該函式的簡單語法為：

Canvas.fillRect(50, 50, 300, 150);

示例

實現 **fillRect()** 的程式碼如下所示。

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

輸出

以下程式碼的輸出為：

建立描邊矩形

可以使用 strokeRect() 函式繪製矩形輪廓。它以起始座標 (x, y) 和矩形的寬度和高度作為引數。該函式的簡單語法為：

Canvas.strokeRect(50, 50, 300, 300);

示例

以下示例建立了一個描邊矩形

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

輸出

上述程式碼的輸出為：

建立透明矩形

它以起始座標 (x,y) 和矩形的寬度和高度作為引數。該函式的簡單語法為：

Canvas.clearRect(50, 50, 60, 60);

以下函式透過使其完全透明來清除指定的矩形區域。為了理解該函式，我們將同時使用 **fillRect()** 和 **strokeRect()** 函式。以下示例顯示了 **clearRect()** 函式是如何工作的。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>clearRect()</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
      <script>
         function rectangle() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
               var ctx = canvas.getContext('2d');
               ctx.fillRect(50, 50, 200, 200);
               ctx.clearRect(45, 45, 60, 60);
               ctx.strokeRect(50, 50, 50, 50);
            }
         }
      </script>
   </head>
   <body onload="rectangle();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
   </body>
</html>

輸出

輸出如下所示，**fillRect()** 以給定的尺寸用黑色填充整個矩形。**strokeRect()** 函式用給定的尺寸標記邊距，而 clearRect() 透過移除黑色使矩形區域透明。

列印頁面