<canvas>是一個新的html元素，這個元素可以被script語言(通常是javascript)用來繪制圖形。例如可以用它來畫圖、合成圖象、或做簡單的(和不那么簡單的)動畫。右面的圖象展示了一些<canvas>的應用示例，我們將會在此教程中看到他們的實現。

<canvas>最先在蘋果公司(apple)的mac os x dashboard上被引入，而后被應用于safari。基于gecko1.8的瀏覽器，例如firefox 1.5，也支持這個新元素。元素<canvas>是whatwg web applications 1.0也就是大家都知道的html 5標準規范的一部分。

在本教程中，我將試著講述如何在你自己的網頁中使用<canvas>元素。提供的示例應該會給你些清晰概念，即用<canvas>能做些什么的。這些示例也可作為你應用<canvas>的起點。

1.canvas 是甚么？

下面網址可以找到html5 canvas的完整定義
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas

現在firefox 2，safari 都直接支持canvas,ie 需要一個excanvas 的js代碼庫轉換。

下面網址可以找到 excanvas[此js庫尚未提供對arcto()，clip()的支持，因此基于其上的各種chart組件天然的不能生成pie圖]
http://excanvas.sourceforge.net/

mozilla的canvas入門
http://developer.mozilla.org/en/docs/category:html:canvas

mininova的canvas入門
http://labs.mininova.org/canvas/

2.canvas 能做甚么？

(1)msx模擬器

it emulates the underlying z80 cpu, tms9918 video display processor (vdp), ppi, ram slots and megaram. in its present form, it should be able to run any program or game developed for msx 1.0.

用js模擬z80等硬件,讀取rom信息，無聲游戲
http://jsmsxdemo.googlepages.com/jsmsx.html

(2)painter
假如性能允許，發展成web photo也是可能的事情。
http://caimansys.com/painter/index.html

(3)效果
水波紋
http://timelessname.com/canvas/experiment01/
某個模糊理論視覺模型
http://timelessname.com/canvas/experiment02/

(4)3d

多面體
http://www.polyhedra.org/poly/

3d地圖
mozilla的例子，raycaster 就是一個。

canvascape - 3d walker，比上面例子更完善些，還提供紋理貼圖功能
一個類似cs的界面
http://www.abrahamjoffe.com.au/ben/canvascape/

(5)chart組件

成形的有 webfx chart,flot等，需要可自行搜索。

3.canvas 的發展

(1)canvas代碼轉換到flash(porting canvas to flash)
http://team.mixmedia.com/index.php?title=porting_canvas_to_flash&more=1&c=1&tb=1&pb=1
(2)支持canvas的框架

mootools支持canvas 的調用，并有一個mocha的基于mootools的組件提供一個窗體功能。