《HTML5 精要剖析》- 3.2.1 配置 <canvas> 與直線描繪

2012-05-18

4236
0
HTML5

HTML5 繪圖由 <canvas> 標籤開始 ~~

HTML5 繪圖由 <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 ctx = 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>

回首頁