放寒假在家,也斷斷續續的休息了好長時間了.原來一直想等鍵盤到的時候練練打打代碼,但今兒晚上在優設王上看到了一款在線編輯Html5的利器."Liveweave" 網站設計的很漂亮,而且配色很符合常用編輯器的配色,一下就喜歡了.
正好現在也是開始學Html5 就用用這個吧. 純新手自我學習哈`
1.1 What is Canvas?
使用Canvas元素時,它會創建一塊矩形區域.默認情況下寬爲300像素,高爲140像素,但也可自設.
基本的Canvas元素
<canvas></canvas>
頁面加入Canvas元素後,我們就可以通過javascript來控制它.可以在其中添加圖片、線條、文字,也可以在裏面繪圖,甚至高級動畫.
使用Canvas編程,首先要獲取其上下文(context).接着在其中執行動作,最後將這些動作應用到上下文中. 類似於數據庫,開發人員先發起一個事務,然後執行某些操作,最後提交這些事務.
1.2 Canvas 座標
Canvas的座標是從左上角開始算起,x軸沿着水平方向(按像素)向右延伸,y軸沿垂直方向向下延伸.左上角(x=0,y=0)的點稱爲原點.
1.3 不適用Canvas的情況
如果其他元素已經夠用了,就不應該再使用Canvas元素.例如H1 H2等
1.4 替代內容
訪問頁面時,如果瀏覽器不支持Canvas元素,或者不支持HTML5 Canvas API中的某些特性,那麼開發人員最好準備一份替代代碼.例如,一些文字或圖片告訴訪問者,使用最新的瀏覽器可以獲得最佳的瀏覽效果.
在Canvas元素中使用替代內容
<canvas>
Update your browser to enjoy canvas!
</canvas>
同樣還可以使用圖片,都會在瀏覽器不支持的情況下顯示出來.
1.5 Css
同大多HTML元素一樣,canvas元素也可以通過應用CSS的方式來增加邊框、設置內外邊距等,默認的CSS屬性還可以被canvas內的元素繼承.
2.1 使用HTML5 Canvas API
按照例子,使用 canvas API創建一幅類似於LOGO的圖像,森林場景,有樹和可以長跑比賽的賽道.
2.2 檢測瀏覽器的支持情況
在創建之前,要確保瀏覽器能夠支持它.
檢測瀏覽器的支持情況
try{
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML =
"HTML5 Canvas is supported in your browser.";
}catch(e){
document.getElementById("support").innerHTML =
"HTML5 Canvas is not supported in your browser.";
}上面的代碼創建一個canvas對象,並且獲取其上下文.如果發生錯誤,則捕獲異常,進而得知瀏覽器不支持.
2.3 頁面中加入Canvas
帶實心邊框的canvas元素
<canvas id="diagonal" height="200" width="200" style="border:1px solid" </canvas>
增加了值爲"diagonal"d的ID特性.
繪製對角線
<script>
function drawDiagonal(){//取得canvas元素及其繪圖上下文
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
//用絕對座標創建一條路徑
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//將路徑繪製到canvas上
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>這段代碼展示了HTML5 Canvas API的重要流程. 首先通過特定的ID獲取對canvas的訪問權.接着定義一個context變量,調用canvas對象的getContext方法,傳入希望使用的canvas類型.通過"2d"來獲取一個上下文. 代碼中調用了三個方法-beginPath、moveTo和lineTo,傳入這條線的起點、終點的座標.通過context.stroke()方法來完成線條的繪製. 如圖 應該明白,我們實際操作的是畫布所提供的上下文對象.beginPath、moveTo、以及lineTo這些函數都不會直接修改canvas的展示結果.只有當對路徑應用繪製(stroke)或填充(fill)方法時,結果纔會顯示出來. 0.0額.. 一不小心,盡然這麼晚了.應該洗洗睡了,明兒繼續學習吧.明兒應該是繪製圖像的另一種方式---變換.(ps 無語了 不知道這個後面是怎麼搞得 誒)
