在這個章節我們將在Html中使用Canvas標簽，再使用Javascript操縱它，達到顯示《Hello World》及圖片的目的。
開始之前我們需要了解2個對象的概念：window和document。
- window對象：window對象在DOM最頂層。我們應該檢測這個對象以確保所有的資源和代碼在我們開始編寫Canvas應用之前已經載入完成。
- document對象：該對象包含頁面上所有的HTML標簽。我們需要查看該對象，以尋找<canvas>標簽並且使用JavaScript來操縱他。
HTML代碼為：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="chp1.js"></script> <script type="text/javascript" src="modernizr.custom.99886.js"></script> </head> <body>
<canvas id="canvas_helloworld" width="500" height="300"> 你的瀏覽器不支持HTML5 Canvas </canvas> </body> </html>
其中chp1.js為我們以后需要編寫的javascript腳本。modernizr.custom.99886.js為modernizr第三方javascript插件，使用它可以避免不同瀏覽器引起的各種問題。
具體內容請看這里：modernizr介紹
首先我們需要檢測window對象的load事件，它是當所有的HTML標簽載入完成后觸發。
檢測load時間有兩種方式
- window.addEventListener("load", eventWindowCallBack, false);第一個參數：事件名稱，第二個參數：回調函數。第三個參數：設為false就行
- window.onload=function() { ... };
在這個章節以及以后的文章中我們都是用第一種方式。
HTML代碼中我們創建了Canvas標簽，它主要有三個屬性。
- id：唯一標識符
- width：寬度
- height： 高度
第一步檢測瀏覽器是否支持canvas，有多種實現方法：theCanvas為我們在HTML中布置得canvas對象。
第一種為
if(!theCanvas || !theCanvas.getContext) {
return;
}
第二種為
!document.createElement('testcanvas').getContext;
第三種為使用modernizr插件
return Modernizr.canvas;
我們使用第三種方式，因為它在不同的瀏覽器中做了不同的處理，拿過來直接用。
第二步獲取canvas對象，並獲取context對象。
var theCanvas = document.getElementById("canvas_helloworld"); var context = theCanvas.getContext("2d"); //canvas中有很多不同的context，這里我們僅需要2D
第三部創建drawScreen()函數，把內容畫到界面中。
在這里我們涉及的函數及屬性為
- fillStyle屬性：設置顏色
- fillRect(x, y, width, height)：畫矩形參數為左上角及寬度和高度。
- font屬性：設置文字風格
- fillText(text, x, y)：往canvas畫出字符串，余下的參數為左上角的x坐標和y坐標。
具體代碼為
context.fillStyle="#ffffaa"; context.fillRect(0,0,500,300); context.fillStyle="#000000"; context.font="20px _sans"; context.textBaseline="top"; context.fillText("Hello World!", 195, 80);
還有一步我們需要在canvas載入一張圖片。在canvas中顯示圖片，我們需要實例化一個Image()對象並且指定它的src屬性。
在顯示之前，你需要等待Image載入完畢，當載入完成后可以創建一個回調函數把它顯示到屏幕中。
var img = new Image(); img.src="rubi.jpg"; img.onload=function() { context.drawImage(img, 180, 130); }
最后我們在canvas的邊上畫一個黑色的矩形，醒目的顯示出來。
context.strokeStyle="#000000";
context.strokeRect(5, 5, 490, 290);
整理后的代碼為
/** * @author Rafael */ window.addEventListener("load",eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { // return !document.createElement('testcanvas').getContext; return Modernizr.canvas; } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvas_helloworld"); var context = theCanvas.getContext("2d"); //canvas中有很多不同的context，這里我們僅需要2D // if(!theCanvas || !theCanvas.getContext) { // return; // } function drawScreen() { context.fillStyle="#ffffaa"; context.fillRect(0,0,500,300); context.fillStyle="#000000"; context.font="20px _sans"; context.textBaseline="top"; context.fillText("Hello World!", 195, 80); var img = new Image(); img.src="rubi.jpg"; img.onload=function() { context.drawImage(img, 180, 130); } context.strokeStyle="#000000"; context.strokeRect(5, 5, 490, 290); } drawScreen(); }
至此，這一篇的內容講完了，今天是學習HTML5的第一天，以后也還會陸續的把最新的學習成果發表出來供大家分享，具體時間為一周4篇左右。
寫的不好的地方，望大家諒解，我也是第一次寫博客。只要對一個人有幫助，我的目的就達到了。