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

lufy發表於2014-07-30

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


HTML5canvas標籤

現在(20122月)HTML5依然處於草案階段。

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

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

lufy20121217W3C正式宣佈凝結了大量網路工作者心血的HTML5規範已經正式定稿,有訊息稱,在2014年底,HTML5將成為一種完整的成品標準。


canvas標籤的基礎知識

canvasimg等標籤一樣,是一個可以自由制定大小的矩形區域。

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

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

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

scrolling="no" src="http://jsdo.it/blogparts/hnsm" width="465" height="546" style="border:1px #CCC solid;width:465px;">

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


WebGLcanvas

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

實際上,剛才貼出來的jsdo.it上的那個小遊戲,是利用了canvas2dcontext功能。

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

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

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

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


總結

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

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


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



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

相關文章