我們將開始一個(gè)關(guān)于html5 canvas的系列課程。這個(gè)系列是我讀《HTML5 Canvas：Native Interactivity and Animation for the Web》后的總結(jié)，有興趣的朋友可以去下載英文原版書籍閱讀。這本書通過介紹canvas游戲開發(fā)的方式，向我們展現(xiàn)canvas強(qiáng)大的功能，我覺得相當(dāng)不錯(cuò)，通過閱讀這本書我學(xué)到了canvas很多的知識(shí)。其實(shí)canvas本身的api并不多，關(guān)鍵是活學(xué)活用，學(xué)會(huì)對(duì)api的組合使用制作出令人難以置信的效果。而這本書就是你學(xué)習(xí)canvas最好的選擇，只可惜他暫時(shí)還沒有中文版，英文不好的朋友只有再等等了。

大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見得支持html5所有的新特性。所以大家要選擇一款比較新的瀏覽器作為自己的調(diào)試環(huán)境，建議大家使用firefox（開發(fā)者的最愛）或者是chrome瀏覽器，我所有的例子都是基于firefox開發(fā)的。

html5相關(guān)的基礎(chǔ)知識(shí)這里就不做介紹了，網(wǎng)上有很多關(guān)于html5的教程，自行學(xué)習(xí)吧。學(xué)習(xí)html5需要大家有比較好的javascript的基礎(chǔ)，大家可以去湯姆大叔的博客進(jìn)行學(xué)習(xí)：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其實(shí)他的這個(gè)系列課程還是有相當(dāng)難度的，50多篇全學(xué)好你應(yīng)該算是js專家了。

現(xiàn)在我們正式開始我們的canvas課程，第一個(gè)例子：“hello canvas”。

首先需要在body中添加canvas標(biāo)簽，如下：

代碼如下:

<canvas id="canvasOne" width="500" height="300">

Your browser does not support HTML5 Canvas.

</canvas>

canvas中的text部分將會(huì)在瀏覽器不支持canvas對(duì)象時(shí)顯示。

定義了canvas標(biāo)簽，當(dāng)我們需要通過js對(duì)他進(jìn)行操作的時(shí)候，通過getElementById就可以實(shí)現(xiàn)。

var theCanvas = document.getElementById("canvasOne");我們現(xiàn)在已經(jīng)習(xí)慣使用jquery來開發(fā)任務(wù)，那么使用jquery如何獲取canvas對(duì)象呢？

var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]沒有，如果沒有使用get()方法或者[]下標(biāo)的話，你的js代碼將不能正常對(duì)canvas進(jìn)行操作。因?yàn)?('#canvasOne')獲取到的是一個(gè)jquery對(duì)象，而我們實(shí)際要操作的是一個(gè)html dom對(duì)象。這里有存在一個(gè)jquery對(duì)象轉(zhuǎn)變成dom對(duì)象的問題，通過get()或者下標(biāo)的方式就完成了這個(gè)轉(zhuǎn)換。如果需要把一個(gè)dom對(duì)象轉(zhuǎn)換成jquery對(duì)象，可以使用$()方法實(shí)現(xiàn)。不清楚的朋友只有自己去百度了，這里不做深究。

為了代碼的健壯性，我們需要判斷你的瀏覽器是否支持canvas對(duì)象，可以通過下面代碼實(shí)現(xiàn)。

代碼如下:

if (!theCanvas || !theCanvas.getContext) {

return;

}

不過推薦大家使用modernizr.js庫(kù)完成這一工作，這是一個(gè)很通過的html5 js庫(kù)，提供了很多有用的方法

代碼如下:

function canvasSupport () {

return Modernizr.canvas;

}

canvas支持2d渲染，通過如下代碼實(shí)現(xiàn)：

var context = theCanvas.getContext("2d");

下面我們就可以通過context對(duì)象在canvas上繪制圖像了。

代碼如下:

//設(shè)置區(qū)域顏色

context.fillStyle = "#ffffaa";

//繪制區(qū)域

context.fillRect(0, 0, 500, 300);

//設(shè)置字體

context.font = "20px _sans";

//設(shè)置垂直對(duì)齊方式

context.textBaseline = "top";

//繪制文字

context.fillText ("Hello World!", 195, 80);

//設(shè)置邊框顏色

context.strokeStyle = "#000000";

//繪制邊框

context.strokeRect(5, 5, 490, 290);

下面介紹下圖片的繪制。由于圖片的異步下載的，為了保證你用canvas繪制一個(gè)圖片時(shí)，該圖片已經(jīng)下載完畢，我們使用下面的方式：

代碼如下:

var helloWorldImage = new Image();

helloWorldImage.src = "helloworld.gif";

helloWorldImage.onload = function () {

context.drawImage(helloWorldImage, 160, 130);

}

當(dāng)圖片下面完畢時(shí)，會(huì)觸發(fā)onload事件，這里再使用context對(duì)象繪制圖片。