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

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

HTML5和canvas标簽

如今（2012年2月）HTML5依舊處于草案階段。

HTML5支援網頁端的多媒體功能和畫布功能，追加了非常多全新的更合理的Tag标簽。各個浏覽器也都在逐漸的完好這些新的特性。

Canvas對象表示一個 HTML畫布元素。如它的名字一樣，它定義了一個API支援腳本化client來繪制圖形或是圖檔，能夠通過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畫圖的基礎知識。