HTML5 是一種新的 Web 標準，支持豐富的圖形和交互特性。HTML5 畫圓是使用 canvas 元素實現(xiàn)的。但是，HTML5 在畫圓時可能會出現(xiàn)不圓的問題。
<html>
<head>
<title>HTML5 畫圓不圓問題</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
您的瀏覽器不支持 canvas 標簽。
</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>
</body>
</html>上面的代碼可以在瀏覽器中正常運行。但是，當修改畫圓代碼中的半徑值時，可能會發(fā)現(xiàn)畫出的圓不完全是圓形，而出現(xiàn)了鋸齒狀的邊緣。
這是因為 canvas 元素使用像素進行繪圖，所以在繪制形狀時，像素之間的精度會對圓形的外觀產(chǎn)生影響。要解決這個問題，可以使用 CSS 進行簡單的解決，將 canvas 元素的寬度和高度設置為偶數(shù)，避免像素間的精度問題。此外，還可以在繪制圓形之前設置 context.lineWidth 的值，使圓形邊緣更平滑。
<canvas id="myCanvas" width="200" height="200" style="width:200px;height:200px;">
您的瀏覽器不支持 Canvas 標簽。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.lineWidth = 2;
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.strokeStyle = '#000';
context.stroke();
</script>