HTML5簡略介紹

標籤：style   blog   http   io   ar   使用   sp   java   on   

今天要說下 HTML5特有的一個元素 canvas ，旨在讓web頁面上作向量圖不需要在依靠flash或是其他外掛程式，在網頁上使用canvas元素時，它會建立一塊矩形地區，預設300*150，當然也是可以自訂的。Canvas中的座標是從左上方開始的，x軸沿著水平方向（按像素）向右延伸，y軸沿垂直方向向下延伸。左上方座標為x=0，y=0的點稱為原點。

 

 

Canvas的功能雖然很強大，但是如果它實現的效果，和當前HTML5已有的元素實現的效果一樣，那當然還是直接使用已有的元素，執行效率上是會快一些的，如果canvas元素不被某些瀏覽器支援，那canvas就必須要要做好相容性考慮，在canvas內定義一段替代內容，替代內容可以是一段解說文字或是一張圖片。Canvas的一般樣式，如邊框，邊距，都可以使用css文法來定義，其內部添加的文字，樣式預設同canvas元素一樣。

下面說說canvas API的使用，先從一個例子說起吧，在canvas中繪製一條對角線：先在html中放入一個canvas元素  然後在javascript指令碼中開始作線，

 

function drawDiagonal(){

        //取得canvas元素及其繪圖上下文

        var canvas = document.getElementByIdx_x("diagonal");

        var context = canvas.getContext(‘2d‘);      

      

        //用絕對座標來建立一條路徑

        context.beginPath();

        context.moveTo(10,140);

        context.lineTo(140,70);

      

        //將這條線繪製到canvas上

        context.stroke();

      

}

window.addEventListener("load",drawDiagonal,true);

 

效果如下：

 

 

雖然比較簡單，但是展示了使用HTML5 canvas API的重要流程。首先通過ID 獲得canvas訪問權，接著定義一個context變數，調用canvas對象的getContext方法，並傳入希望使用的canvas類型。代碼中調用了三個方法--beginPath、moveTo和lineTo，傳入了這條線的起點和終點的座標。

Canvas的強大功能遠不止這些，當然限於篇幅，這裡說不了很多，推薦大家一本書《HTML5進階程式設計》寫的很詳細，適合新手細細品讀。

 

HTML5簡略介紹