使用 JavaScript 在 HTML5 Canvas 中繪製圓

圖形是任何 Web 應用程式的重要組成部分。HTML 提供了兩種建立圖形的方法，第一種是 canvas，另一種是 SVG。在今天的帖子中，我們將學習如何使用畫布和 JavaScript 在 HTML 中建立圖形，特別是圓（二維）。

在 HTML 中使用 JavaScript 通過 canvas 繪製圓圈

Canvas 是 HTML 提供的預設元素，用於在 Web 應用程式上繪製圖形。它只不過是頁面上沒有邊框和內容的矩形區域。使用者可以使用這個矩形區域來繪製圖形。

在畫布中呈現的圖形不同於常規的 HTML 和 CSS 樣式。整個畫布及其包含的所有圖形都被視為單個 dom 元素。

HTML 中 canvas 的方法

1. getContext()：它是由 canvas 提供的內建方法，它根據 contextType 返回畫布上的繪圖上下文。如果上下文識別符號不受支援或已經設定，它將返回 null。支援的上下文型別是 2d、webgl、webgl2 和 bitmaprenderer。
2. beginPath()：是 canvas 提供的內建方法，用於開始路徑或重置現有路徑以繪製圖形。
3. arc()：是 canvas 提供的內建方法，用於根據輸入引數在當前路徑上建立圓弧。
4. fill()：它是 canvas 提供的內建方法，用於用指定的顏色填充當前路徑。使用者還可以指定區域，如 nonzero 和 evenodd。
5. stroke()：它是 canvas 提供的內建方法，用於用給定的筆畫樣式勾勒當前路徑。

arc 的語法

context.arc(
    $centerX, $centerY, $radius, $startAngle, $endAngle, $counterclockwise);

引數

• $centerX：這是一個強制性引數，用於指定 X 或圓的水平座標/中心點。
• $centerY：它是一個強制性引數，用於指定圓的 Y 或垂直座標/中心點。
• $radius：這是一個強制引數，用於指定圓的半徑。這必須是積極的。
• $startAngle：這是一個強制性引數，用於指定從正 x 軸測量的弧度的弧的起始角度。
• $endAngle：這是一個強制性引數，用於指定從正 x 軸測量的弧度的弧度終止角度。例如，2 * Math.PI 表示一個完整的圓圈。
• 逆時針：這是一個可選引數，指定一個布林值，指示如何順時針或逆時針繪製圓。預設值為 false。

使用 JavaScript Canvas 繪製圓的步驟

示例程式碼：

<canvas id="myCanvas" width="500" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

context.beginPath();
context.fillStyle = '#0077aa';
context.strokeStyle = '#0077aa47';
context.lineWidth = 2;

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
</script> 

輸出：