html5 canvas-1.canvas介紹(hello canvas)_html5教學技巧

從今天開始，我們將開始一個關於html5 canvas的系列課程。這個系列是我讀《HTML5 Canvas：Native Interactivity and Animation for the Web》後的總結，有興趣的朋友可以去下載英文原版書籍閱讀。這本書透過介紹canvas遊戲開發的方式，向我們展現canvas強大的功能，我覺得相當不錯，透過閱讀這本書我學到了很多關於canvas的知識。其實canvas本身的api並不多，關鍵是活學活用，學會對api的組合使用製作出令人難以置信的效果。而這本書就是你學習canvas最好的選擇，只可惜他暫時還沒有中文版，英文不好的朋友只有再等等了。

大家都知道，目前並不是所有的瀏覽器中支援html5，就算是支援html5的瀏覽器，也看不見支援html5所有的新功能。所以大家要選擇一個比較新的瀏覽器作為自己的調試環境，建議大家使用firefox（開發者的最愛）或是chrome瀏覽器，我所有的例子都是基於firefox開發的。

html5相關的基礎知識這裡就不做介紹了，網路上有很多關於html5的教程，自行學習吧。學習html5需要大家有比較好的javascript的基礎，大家可以去湯姆大叔的部落格學習：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其實他的這個系列課程還是有相當難度的，50多篇全學好你應該算是js專家了。
現在我們正式開始我們的canvas課程，第一個例子：「hello canvas」。
首先需要在body中添加canvas標籤，如下：

複製代碼

代碼如下:

Your browser does not support HTML5 Canvas.

canvas中的text部分將會在瀏覽器不支援canvas物件時顯示。
定義了canvas標籤，當我們需要透過js對他進行操作的時候，透過getElementById就可以實現。
var theCanvas = document.getElementById("canvasOne");我們現在已經習慣使用jquery來開發任務，那麼使用jquery如何取得canvas物件呢？
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]沒有，如果沒有使用get()方法或[]下標的話，你的js程式碼將無法正常對canvas進行操作。因為$('#canvasOne')取得到的是一個jquery對象，而我們實際要操作的是一個html dom對象。這裡有一個jquery物件轉變成dom物件的問題，透過get()或下標的方式就完成了這個轉換。如果需要把一個dom物件轉換成jquery對象，可以使用$()方法實作。不清楚的朋友只有自己去百度了，這裡不做深究。
為了程式碼的健全性，我們需要判斷你的瀏覽器是否支援canvas對象，可以透過下面程式碼實現。

複製程式碼

程式碼如下:

if (!thevasvas || !theCanvas. getContext) {
return;
}

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

複製程式碼

程式碼如下:

function canvasSupport (return Modernizr.canvas;
}

canvas支援2d渲染，透過以下程式碼實作： var context = theCanvas.getContext("2d")
下面我們就可以透過context物件在canvas上繪製圖像了。

複製程式碼程式碼如下:

//設定區域顏色//繪製區域
context.fillRect(0, 0, 500, 300);
//設定字型
context.font = "20px _sans";
//設定垂直對齊方式
context.textBaseline = "top";
//繪製文字
context.fillText ("Hello World!", 195, 80);
//設定邊框顏色
context.strokeStyle = "#000000";
//繪製邊框
context.strokeRect(5, 5, 490, 290);


下面介紹下圖片的繪製。由於圖片的非同步下載的，為了確保你用canvas繪製一個圖片時，該圖片已經下載完畢，我們使用下面的方式：

複製代碼

程式碼如下:

var helloWorldImage = new Image();
helloImage.src = "helloworld.gif";
helloImage.src = "helloworld.gif"; ) {
context.drawImage(helloWorldImage, 160, 130);
}

圖片下面完成圖片。
大家下載demo看完整程式碼，demo下載位址：html5canvas.helloworld.zip