HTML5画布

arc(cx,cy,radius,start_angle,end_angle,direction);javascript

cx  水平坐标java

cy  垂直坐标canvas

radius  半径spa

start-angel  圆周起始位置  (配图详细解释)3d

end_angle  弧长 Math.PI是半圆  Math.PI*2是整个圆  0.5为四分之一code

direction 顺、逆时针  false为顺时针,true为逆时针(决定了圆弧的方向)blog

 JavaScript 代码:ip

<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 元素:element

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

画半圆get

<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>

相关文章
相关标签/搜索