如何在 Canvas 中绘制扇形

如何在 Canvas 中绘制扇形

<canvas id="canvas" width="150" height="150"></canvas><br>    <script type="text/javascript"><br>    var canvas = document.getElementById("canvas");<br>    function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){<br>    var centerPoint = {x:75,y:75};<br>    start_angle = start_angle || 0;<br>    if (canvas_tag.getContext){<br>    //开始绘制路径<br>    ctx = canvas_tag.getContext("2d");<br>    ctx.beginPath();<br>    //画出弧线<br>    ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);<br>    //画出结束半径<br>    ctx.lineTo(centerPoint.x,centerPoint.y);<br>    //如果需要填充就填充，不需要就算了<br>    if (fill) {<br>    ctx.fill();<br>    }else{<br>    ctx.closePath();<br>    ctx.stroke();<br>    }<br>    } else {<br>    alert('You need Safari or Firefox 1.5+ to see this demo.');<br>    }<br>    }<br>    //画一个起始角度为45度，结束角度为90度，绘图方向顺时针的填充扇形<br>    DrawSector(canvas,Math.PI/4,Math.PI/2,50,true,false);<br>    //画一个起始角度为-90度，结束角度为-135度，绘图方向逆时针的未填充扇形<br>    DrawSector(canvas,-Math.PI/2,-Math.PI*3/4,50,false,true);<br>    &lt;&#47;script&gt;