《HTML5 Canvas遊戲開發實戰》——1.2 Canvas簡介

本節書摘來自華章計算機《html5 canvas遊戲開發實戰》一書中的第1章，第1.2節,作者：張路斌著， 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。

canvas 元素是html5的新元素之一，用于在網頁上繪制圖形，相當于在html中嵌入了一張畫布，這樣就可以直接在html上進行圖形操作了，是以它具有極大的應用價值。canvas 元素本身是沒有繪圖能力的，它需要借助javascript來實作繪圖功能。

1.2.1　canvas标簽的曆史

canvas這個 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 發起）來建構具有相容性的畫布。

< canvas>的标準化工作正在由一個 web 浏覽器廠商的非正式協會進行推動。目前< canvas>已經成為 html5 草案中一個正式的标簽。

1.2.2　canvas的定義和用法

使用canvas标簽，隻需要向html5裡添加canvas元素即可，代碼如下：

1.2.3　如何使用canvas來繪圖

前面已經提到，canvas 元素本身是沒有繪圖能力的，所有的繪制工作必須在 javascript 内部完成。下面來看看如何使用canvas來繪圖。

代碼清單1-7所示代碼可以實作繪制一個矩形。

代碼清單　1-7

下面來分析一下以上代碼。要使用canvas元素，首先要根據id或name，将canvas對象取出來，上面的代碼使用的是getelementbyid方法，如果給canvas标簽加入了name屬性，那麼也可以使用getelementbytagname來擷取canvas對象。

另外，要使用canvas元素，必須先判斷這個元素是否存在及使用者所使用的浏覽器是否支援此元素。如果無法使用canvas元素，那麼下面做的所有事情都是無意義的。

上面的代碼在使用getcontext方法時，傳遞了一個“2d”參數，這就可以得到二維的context對象以實作二維圖形的描畫。試想一下，如果将來canvas可以描畫三維圖形，或許也可以使用“3d”參數。但是目前還隻能使用“2d”作為參數。

在上面的例子中，采用fillstyle方法将畫筆顔色設定為紅色。另外，用fillrect方法規定了圖形的形狀、位置和尺寸。更多canvas的使用方法，将會在第2章之後進行詳細介紹。

1.2.4　canvas的限制

使用canvas可擁有多種繪制路徑、矩形、圓形、字元及添加圖像的方法。但是繪制的圖形是靜止的，如果要讓所畫的圖形動起來，則需要畫出每一幀的圖形，然後再連接配接起來。這些都會在後面的章節做詳細的介紹。

雖然canvas可以對圖形進行一系列操作，但是效率和普及性都存在一定的問題，對于一些相對複雜的圖形和動畫等，目前來看，還是flash更勝一籌。

另外，canvas是html5的新屬性，在使用時需要考慮使用者的浏覽器和使用環境。

canvas目前隻是一張二維畫布，如果要想實作三維效果，需要借助第三方類庫，如three.js或者papervision3d等。