HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法
Canvas 對象表示一個 HTML 畫布元素 - <canvas>。它沒有自己的行為，但是定義了一個 API 支援腳本化用戶端繪圖操作。
你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過 CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的 getContext() 方法并且把直接量字元串 "2d" 作為唯一的參數傳遞給它而獲得的。
<canvas> 标記在 Safari 1.3 中引入，在制作此參考頁時，它在 Firefox 1.5 和 Opera 9 中也得到了支援。在 IE 中，<canvas> 标記及其 API 可以使用位于 excanvas.sourceforge.net 的 ExplorerCanvas 開源項目來模拟。
這個 HTML 元素是為了用戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給用戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
<canvas> 标記由 Apple 在 Safari 1.3 Web 浏覽器中引入。對 HTML 的這一根本擴充的原因在于，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 元件所使用，并且 Apple 希望有一種方式在 Dashboard 中支援腳本化的圖形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引領。這兩個浏覽器都支援 <canvas> 标記。
我們甚至可以在 IE 中使用 <canvas> 标記，并在 IE 的 VML 支援的基礎上用開源的 JavaScript 代碼（由 Google 發起）來建構相容性的畫布。 參見：http://excanvas.sourceforge.net/。
<canvas> 的标準化的努力由一個 Web 浏覽器廠商的非正式協會在推進，目前 <canvas> 已經成為 HTML 5 草案中一個正式的标簽。 參見：http://www.whatwg.org/specs/web-apps/current-work/
畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是視窗高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。預設值是 300。
畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是視窗寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。預設值是 300。
方法
描述
getContext()
傳回一個用于在畫布上繪圖的環境。
屬性
值
height
pixels
設定 canvas 的高度。
width
設定 canvas 的寬度。
向 HTML5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 來尋找 canvas 元素：
var c=document.getElementById("myCanvas");
然後，建立 context 對象：
var cxt=c.getContext("2d");
getContext("2d") 對象是内建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。
下面的兩行代碼繪制一個紅色的矩形：
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成紅色，fillRect 方法規定了形狀、位置和尺寸。
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
如下圖所示，畫布的 X 和 Y 坐标用于在畫布上對繪畫進行定位。
包括前幾篇DEMO都涉及了大量的坐标，那這些坐标是如何準備得到的呢，我們實際開發如何得到我們想要的坐标點?下面給出一個擷取canvas坐标點的DEMO：
下面的在 canvas 元素上進行繪畫的更多執行個體：
通過指定從何處開始，在何處結束，來繪制一條線：
JavaScript 代碼：
canvas 元素：
<a href="http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_line">親自試一試</a>
通過規定尺寸、顔色和位置，來繪制一個圓：
<a href="http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_circle">親自試一試</a>
使用您指定的顔色來繪制漸變背景：
<a href="http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_gradient">親自試一試</a>
把一幅圖像放置到畫布上：
<a href="http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_image">親自試一試</a>
小結：
通過幾篇對Canvas API的學習，知道它的強大和友善，雖然這隻是涉及到它使用的一些基本知識，關于canvas 的使用一本書可能還說不完，隻能算是抛個磚引個玉吧。在以後用到的時候通過積累慢慢熟悉它。相信它是以後網頁遊戲發展的一個新趨勢。
本文轉自 terry_龍 51CTO部落格，原文連結：http://blog.51cto.com/terryblog/800086，如需轉載請自行聯系原作者