您的位置：首页 > Web前端 > HTML5

HTML5 canvas圆形

2015-12-14 17:59 471 查看

<!DOCTYPE HTML>

<body>

<canvas id="myCanvas" width="800" height="600" >
aaaa

</canvas>
<script type="text/javascript">
/*

圆弧arc(x,y,radius,starAngle,endAngle,anticlockwise)

x:圆心的x坐标

y:圆心的y坐标

radius:圆的半径

starAngle:开始角度

endAngle:结束角度

anticlockwise:是否逆时针(true)为逆时针，(false)为顺时针

顺时针（钟表走的方向）

*/

function drawCircle(){
var can = document.getElementById("myCanvas");
var cxt = can.getContext("2d");
//起始一条路径，或重置当前路径
cxt.beginPath();
cxt.arc(200,150,100,0,Math.PI*0.5,true);
cxt.closePath();
cxt.fillStyle="rgba(0,255,0,0.25)";
cxt.fill();

}

drawCircle();

</script>

</body>



解释：

cxt.arc(200,150,100,0,Math.PI*0.5,true);

期望：Math.PI*0.5应该是1/4的圆
原因：arc方法是用来创建一条弧线的，而如果直接将弧线的起点和终点闭合，再进行填充，自然绘制出的是上面的图形了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航