HTML提供了一個(gè)名為“畫(huà)布”（<canvas>）的元素，它可以讓我們使用JavaScript繪制2D圖形。在這篇文章中，我們將會(huì)學(xué)習(xí)如何使用畫(huà)布繪制一個(gè)圓形。

首先我們需要在HTML文檔中添加一個(gè)畫(huà)布元素：

<canvas id="myCanvas"></canvas>

接下來(lái)，我們需要使用JavaScript代碼獲取這個(gè)畫(huà)布元素：

var canvas = document.getElementById("myCanvas");

現(xiàn)在我們已經(jīng)擁有了畫(huà)布元素，接下來(lái)我們需要獲取一個(gè)繪圖上下文對(duì)象，它是我們與畫(huà)布進(jìn)行交互的接口：

var context = canvas.getContext("2d");

現(xiàn)在我們已經(jīng)準(zhǔn)備好開(kāi)始繪制了！我們需要使用畫(huà)布上下文的beginPath()方法開(kāi)始一條路徑，然后使用arc()方法來(lái)繪制圓：

context.beginPath();
context.arc(x, y, r, 0, 2*Math.PI);
context.stroke();

arc()方法需要五個(gè)參數(shù)：

• x：圓心的x坐標(biāo)
• y：圓心的y坐標(biāo)
• r：圓的半徑
• startAngle：起始角度（以弧度為單位）
• endAngle：結(jié)束角度（以弧度為單位）

由于我們要畫(huà)一個(gè)完整的圓，所以起始和結(jié)束角度都是0到2π。最后我們使用stroke()方法來(lái)描邊圓的外輪廓。

綜上，以下是完整的HTML和JavaScript代碼：

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, 2*Math.PI);
context.stroke();
</script>