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

首先我們需要在HTML文檔中添加一個畫布元素：

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

接下來，我們需要使用JavaScript代碼獲取這個畫布元素：

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

現在我們已經擁有了畫布元素，接下來我們需要獲取一個繪圖上下文對象，它是我們與畫布進行交互的接口：

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

現在我們已經準備好開始繪制了！我們需要使用畫布上下文的beginPath()方法開始一條路徑，然后使用arc()方法來繪制圓：

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

arc()方法需要五個參數：

• x：圓心的x坐標
• y：圓心的y坐標
• r：圓的半徑
• startAngle：起始角度（以弧度為單位）
• endAngle：結束角度（以弧度為單位）

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

綜上，以下是完整的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>