为什么这个代码在半径为50的位置(75,75)绘制椭圆而不是圆？
<canvas id=c1 style="width:400;height:400">
<script>
ctx = c1.getContext('2d');
ctx.fillStyle = '#7ef';
ctx.fillRect(0,400,400);
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc(75,75,50,Math.PI*2,true)
ctx.stroke();
</script>
解决方法
如果您更改此行：
<canvas id=c1 style="width:400;height:400">
至：
<canvas id=c1 width=400 height=400></canvas>
它应该工作.不要使用CSS来设置Canvas大小,因为这只会影响元素而不影响位图本身.对于画布,您需要使用它的专用属性(宽度/高度)来设置位图大小,或者只是拉伸/缩放位图以匹配元素的大小.
如果未指定,则画布的默认大小为300×150像素.在这种情况下,这些像素被拉伸(作为图像)到400×400,这就是为什么你得到一个椭圆形.