我用JS画的圆为什么不圆啊
0
[已解决问题]
解决于 2016-01-07 08:59
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function a1(){
var c=document.getElementById("test");
var b= c.getContext("2d");
b.fillStyle="#00ff00";
b.beginPath();
b.arc(80,20,15,0,Math.PI*2,true);//arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)
b.closePath();
b.fill();
}
</script>
</head>
<body onload="a1()">
<canvas id="test" style="height: 200px;width: 200px;border: solid 1px #ff00ff;">
你的浏览器不支持
</canvas>
</body>
</html>
最佳答案
0
<canvas id="test" width="200" height="200" style="border: solid 1px #ff00ff;">
这样就好了
奖励园豆：5
谢谢大大，真的变圆啦~
其他回答(1)
1
<canvas id="test" width="200px" heifht="200px" style="height: 200px;width: 200px;border: solid 1px #ff00ff;">
canvas的宽高概念和css的宽高没有区分开来。
（1）css中设置的宽高，和canvas的虚拟画布的宽高是不同的。
（2）设想2个概念canvas画板和canvas画布。画画在画布上，最后把画布贴在画板上显示出来。画布是可伸缩性的，你在画布上画了个圆，但是平铺在和画布尺寸不一样的画板上，这时候，画就被变形了。
一般我们在使用canvas前，会这样写code
$('#' + canvasId).attr('width', winWidth);
$('#' + canvasId).attr('height', winHeight);
将虚拟的画布和画板的大小设置为一样。主要是设置虚拟的画布大小。
嘿嘿，我知道啦，又学到了新知识~
