arc(cx,cy,radius,start_angle,end_angle,direction);
cx 水平坐标
cy 垂直坐标
radius 半径
start-angel 圆周起始位置 (配图详细解释)
end_angle 弧长 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一
direction 顺、逆时针 false为顺时针,true为逆时针(决定了圆弧的方向)
JavaScript 代码:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
画半圆
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FFFF00"; cxt.beginPath(); cxt.arc(200,200,75,0,Math.PI*1.5,true); cxt.lineTo(200,200); cxt.closePath(); cxt.fill(); </script>