在HTML5一覽中，我們提到html 5被冠以很多高帽，其中最高的一頂、備受爭議的就是”Flash殺手“。IT評論界老喜歡用這個詞了，殺手無處不在。不管是不是殺手，HTML 5引進的一些新特性確實讓人興奮不已。最令人期待的之一就是 canvas元素。

　　作為HTML5標準的一部分，Canvas元素允許腳本動態渲染點陣圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 javascript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。HTML 5 canvas 提供了通過 JavaScript 繪制圖形的方法，此方法使用簡單但功能強大。每一個 canvas 元素都有一個”上下文( context )”(想象成繪圖板上的一頁)，在其中可以繪制任意圖形。

　　大部分的瀏覽器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 還支持 3D canvas ，firefox 也可以通過插件形式支持 3D canvas 。我們甚至可以在 IE 中使用<canvas> 標記，并在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。參見：http://excanvas.sourceforge.net/。

　　如果你對Canvas元素感興趣，本文就為你送上一些HTML 5的<canvas>元素的入門教程和實例。

　　HTML 5的<canvas>元素教程

　　 HTML 5 canvas ——基本語法

　　Opera中國發布的一份canvas基本語法教程，主要介紹 2D canvas基礎以及如何使用基本 canvas 函數，如線條、形狀、圖像和文字等。為了理解此文章，你最好了解 JavaScript 基礎知識。

　　HTML5 Canvas 起步

　　一網友寫的一個系列Canvas入門教程，很認真詳細。共有三篇: 基本概念，路徑和顏色與漸變。

　　 中文Canvas教程

　　Mozilla發布的一份Canvans教程。教程里的一句話可能會讓提起來精神來: 用元素<canvas>并不難，只要你具有HTML和 JavaScript的基礎知識。

　　HTML 5的<canvas>元素實例

　　看完了上面的那些教程，你可能已經會Canvas的基礎使用方法了。但如何利用Canvas來創建可媲美Flash的應用呢？研究一些實例吧。

　　 HTML5 Canvas實驗

　　幾位開發者為了測試Canvas元素在瀏覽器中的表現性能所做的一個實驗: 載入100個與HTML5相關的tweets，用一個基于javascript的粒子引擎將他們展示出來。結果是: 與Flash相比還有相當大的差距。帕蘭這邊查看DEMO，一直LOADING….

基于javascript的粒子引擎展示100個與HTML5相關的tweets

　　相比之下，另一個使用Canvas制作的深入敵后3D引擎就非常流暢。用鍵盤方向鍵移動可查看效果。

深入敵后3D引擎

　　 通過Canvas逐步構建一個可視化程序的架構

　　John Resigd在一次關于Processing.js開發進展的演講中，涉及了Canvas和Processing兩種方式在處理圖形方面的比較。在演講中，他演示了如何通過Canvas逐步構建一個可視化程序的架構。查看DEMO

通過Canvas逐步構建一個可視化程序的架構

　　Creating pseudo 3D games with HTML 5 canvas and raycasting

　　這篇文章教你如何使用HTML5的Canvas和raycasting創建一個偽3D游戲。

　　使用 3d canvas 技術制作的 3D 貪食蛇游戲

　　效果是很棒，但截入速度還是個問題。

3D 貪食蛇游戲

　　你所不知道的HTML –從 XHTML2 到 HTML5

　　這篇文章里有個簡單的利用Canvas元素實現的3D旋轉立體五角星。剛入門的朋友可以學著制作一個。