【一天一個canvas】填充一個圓形(六)


圓形的用途很廣,當然也包含了橢圓。

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.beginPath();
            cans.arc(200,150,100,0,Math.PI*2,true);
            cans.closePath();
            cans.fillStyle = 'green';//本來這里最初使用的是red,截圖一看,傻眼了,怕上街被愛國者打啊,其實你懂的~~
            cans.fill();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

這里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是(圓心X坐標,圓心Y坐標,半徑,開始角度(弧度),結束角度弧度,是否按照順時針畫);

arc中各參數比較:

a、cans.arc(200,150,100,0,Math.PI,true);
 
         
c、cans.arc(200,150,100,0,Math.PI/2,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

d、cans.arc(200,150,100,0,Math.PI/2,false);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM