<canvas width="500" height="500" style="background:yellow" id="canvas"> 您的浏览器不支持该标签 </canvas>cxt.arc(200,200,50,0,360,true);cxt.stroke();上面这段代码，在页面显示的圆不是一个完整的圆，为什么。我把后面的true改成false就变成一个完整的圆了，不知道其中的奥秘，求解答
3 回答
已采纳
qq_有梦为马随处可栖_0
TA贡献2条经验 获得超1个赞
<html>
<head>
<title>
画
</title>
<script>
function circle(){
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
cxt.lineWidth=3;
cxt.strokeStyle="black";
cxt.arc(200,200,50,0,Math.PI*2,true);//x坐标，y坐标，半径，起始角度，结束角度,画法方向
cxt.closePath();
cxt.stroke();
}
</script>
</head>
<body onload="circle()">
<canvas width="500" height="500" style="background:yellow" id="canvas">
您的浏览器不支持该标签
</canvas>
</body>
</html>
//你把那个360换成Math.PI*2 这个是弧度数就可以了画出圆了
// true是指顺时针进行画图 具体原因我也不太了解 加油吧
qq_有梦为马随处可栖_0
TA贡献2条经验 获得超1个赞
补充：说错了true是逆时针而false是逆时针
你用的360换算成弧度值其实是2.0几
就是从false显示的不完整圆 的左下角开始画顺时针画到0出也就是正X轴方向
不完整的圆就出来了
最后推荐使用弧度就是Math.PI 这是π表半圆
<html>
<head>
<title>
画
</title>
<script>
function circle(){
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
cxt.lineWidth=3;
cxt.strokeStyle="black";
cxt.arc(200,200,50,0,Math.PI*2,false);//x坐标，y坐标，半径，起始角度，结束角度,画法方向
cxt.stroke();
}
</script>
</head>
<body onload="circle()">
<canvas width="500" height="500" style="background:yellow" id="canvas">
您的浏览器不支持该标签
</canvas>
</body>
</html>
- 3 回答
- 1 关注
- 1661 浏览
添加回答
举报
0/150
提交
取消