瀏覽器無法渲染圓形

Question

我有這個腳本和標記。

<canvas id="myCanvas" style="width:100px; height:100px; background-color:aqua" > 
</canvas> 
<script> 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var centerX = canvas.width/2; 
var centerY = canvas.height/2; 
var radius = 10; 

context.beginPath(); 
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
context.fillStyle = 'green'; 
context.fill(); 
context.lineWidth = 5; 
context.strokeStyle = '#003300'; 
context.stroke(); 
</script> 

問題是，瀏覽器描繪了一個日食而不是圓圈。爲什麼？

Answer 1

您通過使用CSS樣式更改大小來扭曲您的畫布。相反，設定直接使用標籤上的height和width性質及其大小：

<canvas id="myCanvas" width="100" height="100" style="background-color:aqua"> 

的圓到elipse失真的產生是因爲畫布默認情況下更廣泛的比他們高，但是你已經使用CSS給力瀏覽器將廣角矩形的畫布像素渲染爲正方形。通過使用height和width屬性，可以更改畫布中的像素數，而不是更改它們佔用的大小。