为什么这个代码在半径为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,这就是为什么你得到一个椭圆形.
