HTML5 canvas圆形

来源：互联网发布：犀牛mac 中文破解版编辑：程序博客网时间：2024/05/24 08:34

<!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.PI0.5,true);
cxt.closePath();
cxt.fillStyle="rgba(0,255,0,0.25)";
cxt.fill();
}
drawCircle();
</script>
</body>

解释：

期望：Math.PI*0.5应该是1/4的圆

原因：arc方法是用来创建一条弧线的，而如果直接将弧线的起点和终点闭合，再进行填充，自然绘制出的是上面的图形了。

0 0