配置<canvas> 與直線描繪

繪圖由<canvas> 標籤開始,它在網頁上呈現一塊畫布,定義用來呈現各種圖形的視覺化區域,一旦完成這個標籤的配置,你便可以在其中描繪任何圖形,它與網頁關係如下圖:


原點座標(0,0)為左上角,水平 x 座標從原點往右邊遞增,垂直座標 y 從原點往下遞增,描繪圖形時,透過座標位置的設定,指定與原點偏移的距離,以決定在canvas區域的定位。

考慮以下的網頁標籤配置:

<body>
<canvas id="pcanvas" style="background:silver;"  ></canvas>
<body>

這一段<canvas> 標籤配置,將背景設定定為 silver ,因此在網頁中會看到一塊預設大小的灰色區域,後續即可在這個區域中描繪任何圖形。


我們進一步透過height 與width 屬性則決定 canvas 可顯示在畫面上的可顯示區域大小,如下式:

<canvas id="pcanvas" style="background:silver;"
width="720" height="320" >
</canvas>

完成 canvas 區域的適當調整,接下來就可以在其中描繪圖形了。畫一條直線是最簡單的繪圖操作,因此這裏直接利用直線描繪來說明最基礎的<canvas> 標籤繪圖功能支援,我們希望在網頁載入時,完成一條直線的描繪,並顯示在 canvas 區域中。

首先取得<canvas> 的參照,並且取得繪圖需要的 context 物件,這個物件關聯至<canvas> ,所需的語法如下:

var c = document.getElementById('pcanvas') ;
var ctx = c.getContext('2d');

第 1 行取得畫面<canvas> 區域的參照並且指定給變 c ,第 2 行的 ctx 則是透過 c 取得此 <canvas> 的繪圖功能物件,此物件支援各種繪圖功能,透過其調用指定的方法,即可描繪圖形。假設要描繪一條直線,從座標點 (60,60) 到 (600,200) ,所需的語法如下:

ctx.moveTo(60,60);
ctx.lineTo(600,200);

第一行設定起始座標,第二行設定線條的結束座標,最後再調用 stroke() 方法即可將線條描繪出來,以下列舉完整的網頁程式碼:

<!DOCTYPE html >
<html >
<head>
    <title></title>
    <script>
        window.onload =function (){
            var c = document.getElementById('pcanvas') ;
            var context = c.getContext('2d');
             ctx.moveTo(60,60);
             ctx.lineTo(600,200);
             ctx.stroke();
    } 
    </script>
</head>
<body>
<canvas id="pcanvas" style="background:silver;" width="720" height="320"  ></canvas>
</body>
</html>

最後出現以下的結果:


沒有留言: