html5中canvas繪製圓形

cherishSpring發表於2016-07-27
HTMLCanvas
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas繪製圓形</title>
    </head>
    <body>
        <canvas id="myCanvas" width="500" height="500"></canvas>
        
        <!--
        圓弧：context.arc(x,y,radius,starAngle,endAngle,anticlockwise)
         x:圓心的x座標
         y:圓心的y座標
         straAngle:開始角度(整個圓周為2PI,右邊正東方為0PI,然後順時針旋轉)
         endAngle:結束角度(參考網址：http://www.108js.com/article/article7/70206.html?id=1036)
         anticlockwise:是否逆時針（true）為逆時針，(false)為順時針
        -->
        <script type="text/javascript">
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.beginPath();
            context.arc(200,150,100,0,Math.PI*3/2,true);
            context.closePath();
            context.fillStyle="rgba(0,255,0,0.25)";
            context.fill();
            
            //左側1/4圓弧
            context.beginPath();
            context.arc(100,150,50,Math.PI/2,Math.PI,false);
            context.fillStyle='rgba(255,0,0,0.25)';
            context.fill();
            context.strokeStyle='rgba(255,0,0,0.25)';
            context.closePath();
            context.stroke();
        </script>
    </body>
</html>

相關文章