如何使用 HTML 畫佈建立形狀

目錄

1. 簡介
2. 開始使用
3. 繪製形狀
4. 結論

✍️簡介

HTML 元素用來建立包含圖形的內容。這使開發人員有機會繪製形狀、文字和形狀，包括樣式和動畫。

✨ 畫布入門

使用 HTML 建立形狀時，有一些設定提示

• 1.新增元素到 HTML 頁面來指定其用途，在 canvas 標籤中包含將由 Javascript 動態控制的標識（id）屬性。您還應該設定寬度和高度來決定畫布元素的大小

• 2.操作使用 JavaScript 取得元素並使用 ID 檢索元素並將其指派給常數畫布。 getContext("2d") 方法使畫布渲染為文字、形狀或圖像。

✏️ 繪製形狀

？ 長方形

這些方法可用來建立一個矩形，其中 x = 矩形的 x 座標，y = 矩形的 y 座標，width = 矩形的寬度和矩形的高度。

• 填滿矩形（x，y，寬度，高度） 此方法建立一個具有填滿樣式的填滿矩形，以賦予其特定的顏色。

• 筆畫矩形（x，y，寬度，高度） 此方法會建立一個輪廓矩形或帶有描邊的矩形，可以使用描邊樣式為其新增顏色。

• 清除矩形（x，y，寬度，高度） 此方法建立一個透明矩形，但您必須指定填滿顏色名稱的畫布寬度和高度，以便透明矩形可以渲染

？ 廣場

建立正方形的方法與矩形相同，差異在於寬度值與矩形不同，高度相同。

？ 三角形

這些方法可用來建立三角形。

-beginPath()：此方法是開始一條新的繪圖路徑。
-moveTo(x, y)：此方法有助於將筆移到三角形的第一個頂點
-lineTo(x, y)：此方法繪製三角形的底頂點。

⚪️圓圈

以下這些方法用於建立圓圈：

• beginPath()：此方法開始路徑。
• arc(x, y, radius, startAngle, endAngle, anticlocking)：用來建立圓，其中 x 和 y 為圓心的圓心座標，radius 為圓的半徑，startAngle 和 endAngle 為圓的角度圓圈。
• Math.PI- 用來建立半圓，而乘以 2 將會得到一個完整的圓

？ 橢圓形

這個形狀使用相同類型的方法，但是使用；

-橢圓（x，y，radiusX，radiusY，旋轉，startAngle，endAngle，逆時針）：其中
-x和y是橢圓的中心座標，
-radiusX 和 radiusY 是
的水平和垂直半徑 橢圓形，
-rotation 以弧度顯示橢圓的旋轉，
-startAngle和endAngle表示
的開始和結束角度 繪圖，以弧度和
-逆時針，可選，值為 true 或 false
（預設為 false）。

？平行四邊形

這個形狀使用了以下方法；

• beginPath 開始新的繪圖路徑，moveTo(x, y) 設定第一個角，因為形狀有 4 條邊和 4 個角。
• lineTo 繪製將它們連接在一起的線，因為有 4 條邊。

？ 梯形

這個形狀與平行四邊形非常相似，它們使用相同的方法來繪製它們。它們唯一的不同是座標值。

？ 圓錐體

這個形狀結合了繪製三角形的方法和半圓的方法。

？ 多邊形

要建立多邊形，您需要確定形狀的邊，因為邊數不同。

以下方法用於建立多邊形：

• beginPath()：這個方法是建立一個新的形狀。
• closePath()：這個方法是結束形狀。
• cx：x 座標中心的值。
• cy：它的值指定 y 座標的中心。
• radius：形狀的半徑。

要得到角度，你必須用這個公式將圓一分為二來計算；

angle = 2π/ n

• 五邊形

• 六邊形
  

• 七邊形

• 八邊形

• 九納貢

• 十邊形

結論

本文終於到了結尾。我們創建的形狀有一系列的繪製方法。

感謝您的閱讀。透過
與我聯繫 領英

X

以上是如何使用 HTML 畫佈建立形狀的詳細內容。更多資訊請關注PHP中文網其他相關文章！