Canvas繪製圓

之前練習了一下繪製矩形順便了解了一些Canvas經常用到的屬性名。

---------------------------------------------------------------------------------------------------------------------------------------------------------------

現在來練練畫圓。

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">

</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.arc(100,100,80,0,Math.PI*2,false);
    cxt.fill();
</script>

畫圓的方法：arc(x, y, radius, startRad, endRad, anticlockwise)

x：圓心x座標

y：圓心y座標

radius：圓的半徑

startRad：初始弧度

endRad：結束弧度

anticlockwise：畫圓的方向，true：逆時針   false：順時針 默認是false

弧度：是以x軸正方向（即3點針方向），順時針旋轉的角度來計算的。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

現在我們畫個從3點到6點的圓。弧度就是0到（1/2）π，這是順時針的情況。如果你想逆時針，那就是（1/2）π到0.

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.arc(100,100,80,Math.PI*0,Math.PI*0.5,false);
    cxt.fill();
</script>

一開始很點看不懂這是什麼鬼，爲什麼不是1/4的圓的形狀。

蒙了一會兒，然後自己畫了一下圖就有點懂了

應該是這麼一回事。它是起始點和結束點連成一條線，這條線和最外側的弧線組成一個面。就形成了這麼一個形狀。

接着再理解一下那個弧度。

其實簡單點說就是 起始弧度規定一個點，結束弧度規定了一個點，兩個點連成直線。然後這兩個點根據你的旋轉方向形成弧線，直接和弧線組成一個面，就是所繪製的圖形了。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

理解了這些 ，畫弧線就是簡單了，在上面的例子上我們驚變一下，我們不填充圖形，直接繪製邊框即。

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.strokeStyle='#000000';
    cxt.arc(100,100,80,Math.PI*0,Math.PI*0.5,false);
    cxt.stroke();
</script>

------------------------------------------------------------------------------------------------------------------------------------------------------------------

再繪製一個圓圈圖形

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.strokeStyle='#000000';
    cxt.arc(100,100,80,Math.PI*0,Math.PI*2,false);
    cxt.stroke();</span>
</script>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

PS：

如果大家忘記弧度是什麼鬼，可以先百度一下弧度哈！

最後這些僅屬於這人理解，僅供參考，大家還是根據自己的實際練習去理解理解吧