html5中的canvas标签
<canvas width="500" height="500" style="background:yellow" id="canvas">
您的浏览器不支持该标签
</canvas>
cxt.arc(200,200,50,0,360,true);
cxt.stroke();
上面这段代码，在页面显示的圆不是一个完整的圆，为什么。我把后面的true改成false就变成一个完整的圆了，不知道其中的奥秘，求解答
qiqiqiqi010629浏览 1662回答 3
3回答
-
qq_有梦为马随处可栖_0
<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
补充：说错了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> -
qq_柠檬树__0
true是顺时针 false是逆时针
随时随地看视频慕课网APP
相关分类
Html5