浏览器无法渲染圆形

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属性，可以更改画布中的像素数，而不是更改它们占用的大小。