首页新闻找找看学习计划

我用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>
很小的菜鸟的主页 很小的菜鸟 | 菜鸟二级 | 园豆:204
提问于:2016-01-06 14:42
< >
分享
最佳答案
0
<canvas id="test"  width="200" height="200" style="border: solid 1px #ff00ff;">

这样就好了

奖励园豆:5
默然沉醉 | 菜鸟二级 |园豆:352 | 2016-01-06 17:28

谢谢大大,真的变圆啦~

很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 08:57
其他回答(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);

将虚拟的画布和画板的大小设置为一样。主要是设置虚拟的画布大小。

[0] | 园豆:1255 (小虾三级) | 2016-01-06 15:50

嘿嘿,我知道啦,又学到了新知识~

支持(0) 反对(0) 很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 08:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册