HTML5画布

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>

转载于:https://www.cnblogs.com/chloe-0328/p/10130479.html