HTML中通過使用

標簽

可以展示代碼格式的文本，非常適合用來演示圓圈的HTML代碼。下面，我們就來介紹一下如何使用HTML代碼來創建實心圓圈：

<div style="border-radius: 50%; width: 100px; height: 100px; background-color: #000;">
</div>

如上所示，我們使用了 div 元素，并設置了它的寬和高為100像素，并設置了圓角半徑為50%，這樣就得到了一個圓形的 div 元素。 最后，通過設置 background-color 屬性的值為 黑色(#000)，我們就得到了一個黑色的實心圓圈。

除了使用 div 元素創建實心圓圈，在HTML5中還可以使用更為簡單的一種方式，那就是使用 canvas 元素。下面是使用 canvas 元素的方式來繪制一個實心圓圈的代碼：

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI, false);
context.fillStyle = '#000';
context.fill();
</script>

在上面的代碼中，我們首先創建了一個 canvas 元素，并給它設置了一個 ID，以便在后面的 JavaScript 代碼中使用。接著我們通過調用 getContext() 方法來獲取繪圖上下文，然后調用 beginPath() 開始繪圖，并使用 arc() 方法來繪制一個圓形，最后將填充顏色設置為黑色，并調用 fill() 方法來填充整個圓形。

總的來說，無論是使用 div 元素還是 canvas 元素，都可以很容易地繪制出一個實心圓圈。這些簡單的代碼可以讓我們在 Web 開發中更加靈活地實現我們的設計需求。