配置<canvas> 與弧線描繪

如果要描繪弧線,可以透過 arc() 方法定義弧線的相關資訊。弧線以圓形為基準進行描繪,考慮以下的說明圖示:


一段弧線,是由指定大小的圓擷取其中的部份圓周所定義,只要定義此弧線所參考的圓形,即可取得所要的弧線,而 arc() 方法的定義如下:

arc(x, y, r, startAngle, endAngle, anticlockwise)

由左至右,前兩個參數 x 與 y ,表示所要參考的圓心座標:


第三個參數 r 為圓形的半徑:


接下來的startAngle 參數表示弧線開始的角度,而 endAngle 則是弧線結束的角度,而定義這兩個參數之前,必須先瞭解角度與弧線構成的關係。

角度以 Math.PI 這個常數值作表示,水平線右邊與圓周交接的座標位置為 0 度,順時針旋轉繞一圈回到此座標點,其間會經過兩個 Math.PI 的角度,如下圖:


而最後一個參數 anticlockwise 是選擇性的,這是一個 Boolean 值,如果指定為 true ,表示弧線必須以逆時針方向描繪,反之則是順時針方向,而 false 是預設值,如果以上圖為例,將最後一個參數設定如下:

arc(300, 150, 100, Math.PI*1/2,Math.PI,true)

如此一來弧線必須以逆時針方向描繪,我們可以得到相反的結果如下:


圖中的弧線,以逆時針方向,從 1/2 Math.PI 描繪至 Math.PI 的位置。

瞭解參數的原理之後,就可以進一步透過指定開始與結束的角度,定義任何一段弧線,最後調用 stroke() 方法將其描繪出來。考慮以下的圖示:


這是 1/4 圓周構成的弧線,所需的完整程式碼如下:

<!DOCTYPE html >
<html >
<head>
    <title></title>
    <script>
        window.onload = function () {
            var canvas = document.getElementById('pcanvas');
            var context = canvas.getContext('2d');
            context.arc(300, 150, 100, Math.PI*1/2,Math.PI);
            context.stroke();
        }   
    </script>
</head>
<body>
<canvas id="pcanvas" width="600" height="400"
    style="border:1px dotted gray;"   > </canvas>
</body>
</html>

其中調用 arc()方法描繪 1/4 圓周的弧線,你可以在最後指定參數值 true ,則會反方向繪出 3/4 圓周弧線。
當然,細心的讀者應該也想到了,如果將起始與結束的角度,設定為 0~2*Math.PI ,則描繪出來的圖形將是一個完整的圓形,如下式:

context.arc(300, 150, 100,0, 2*Math.PI);

沒有留言: