[WebGL入門]二，開始WebGL之前，先瞭解一下canvas

標籤：webgl

註：文章譯自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的額外說明，我會加上［lufy：］，另外，鄙人webgl研究還不夠深入，一些專業詞語，如果翻譯有誤，歡迎大家指正。

HTML5和canvas標籤

現在（2012年2月）HTML5依然處於草案階段。

HTML5支援網頁端的多媒體功能和畫布功能，追加了很多全新的更合理的Tag標籤，各個瀏覽器也都在逐漸的完善這些新的特性。

Canvas對象表示一個 HTML畫布元素，如它的名字一樣，它定義了一個API支援指令碼化用戶端來繪製圖形或是圖片，可以通過javascript來操作這些API。當然WebGL也是利用canvas來實現的，不過在此之前，先來簡單的說明一下canvas。

lufy：2012年12月17日W3C正式宣布凝結了大量網路工作者心血的HTML5規範已經正式定稿，有訊息稱，在2014年底，HTML5將成為一種完整的成品標準。

canvas標籤的基礎知識

canvas和img等標籤一樣，是一個可以自由制定大小的矩形地區。

通過javascript可以對矩形地區進行操作，可以自由的繪製圖形，文字等。而且，可以添加影子，進行塗色，另外還可以對繪製的圖形進行旋轉等操作。而且，Web上常用的gif,jpg,png等格式的圖片，也可以直接進行繪製。

但是，能夠管理操作動畫等處理的對象和方法是沒有的。也就是說，為了製作動態應用，通常會使用javascript進行迴圈處理。

在渲染速度上，由於javascript近幾年的執行速度在不斷的飛速上升，所以，如果不是特別複雜的應用的話，達到60FPS還是不成問題的。下面是我之前用canvas做的一個小遊戲，現在把它貼出來。＊已經上傳到了jsdo.it。

沒有使用WebGL，只是利用了canvas一般的API，已經能夠達到這種程度了。雖然說實際啟動並執行結果依賴於啟動並執行環境，但是還是相當不錯的吧。

WebGL和canvas

可以看到，使用canvas已經可以比較自由的繪製各種圖形了，那麼，為什麼還要用WebGL來做處理呢？

實際上，剛才貼出來的jsdo.it上的那個小遊戲，是利用了canvas的2d的context功能。

context是一個封裝了繪圖處理的各種API的對象，這個對象中包含了所有的繪圖函數和屬性，你可以把它想象成一個司令塔，一切的設定和處理命令都是由它發出的。

2d的context可以進行圖形，文字以及圖片資料的描畫，但是也僅限於此，像它的名字一樣，只能用於2d空間的繪圖。

和這個相對的，WebGL是三維，可以描畫3D圖形，區別於之前的2dcontext，它叫做webglcontext。

webglcontext對象和2dcontext對象 一樣，提供了各種各樣的屬性和方法，通過webglcontext，可以實現利用WebGL來描畫圖形。

總結

關於context，在我寫這篇文章的時候，只提供了2d和webgl兩種定義。但是webglcontext暫時叫做experimental-webgl，以後，還有可能會出現新的類型，這個現在就不考慮了。

本網站的所有內容，都是使用WebGL來說明的，而2dcontext和今後出現的新的context，並沒有打算去研究。（當然，也可能會出現一些2dcontext的內容......）

下次，開始介紹3d繪圖的基礎知識。

轉載請註明：轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend