前提條件和預期結果
目前只有少數的瀏覽器支援 webgl ,請看我的另外一篇文章:can i use webgl?.
下面的例子是在 windows 下的 chrome 16/23 以及 android 下的 firefox 17 進行測試。如果你使用的是非相容瀏覽器訪問則會彈出乙個警告。
圖1:包含 hello world 文字的動畫的 webgl 立方體
在相容 html5 的瀏覽器上,你將會看到如下圖所示的帶動畫效果的立方體:
圖2: 示例執行的螢幕截圖
該**基於 lighting in webgl - how to simulate lighting effects in your webgl context - 非常感謝這篇教程。在該例項初始執行時,動畫的立方體是通過乙個靜態的 bitmap 圖形物件渲染的。
下面的**演示如何在程式中動態的渲染文字:
xml/html code複製內容到剪貼簿
在這裡使用 gl.pixelstorei(gl.unpack_flip_y_webgl, true); 是非常重要的,用來確保寫文字時不會前後顛倒。剩下的就很容易理解了:
xml/html code複製內容到剪貼簿
原始碼// file #1: webgl-demo.htm
xml/html code複製內容到剪貼簿
// file #02: webgl-demo.js
xml/html code複製內容到剪貼簿
本文標題: 在支援html5的瀏覽器上執行webgl程式的方法
本文位址:
HTML5 移動瀏覽器支援
全文完 以下為廣告部分 如果您想看下您的 https部署的是否安全,花1分鐘時間來 myssl.com 檢測以下吧。讓您的https 變得更安全!ssl檢測評估 快速了解https 安全情況。安全評級 a a a 行業合規檢測 證書資訊檢視 證書鏈資訊以及補完 伺服器套件資訊 證書相容性檢測等。ss...
HTML5瀏覽器支援判斷
首先判斷瀏覽器是否支援html5,根據以往的經驗判斷瀏覽器型別以及版本 這裡提供另外一張思路和方法。建立個html5的特性 看瀏覽器是否存在 參考w3c html div id intro p strong strong p div id checkvideoresult style margin ...
HTML5 各大瀏覽器對html5的支援情況
html5 各大瀏覽器對html5的支援情況 1,主流瀏覽器對html5的支援情況 1 chrome,firefox 支援html5很多年,而且有自動公升級,支援最好。2 safari,opera 同樣支援html5很多年,支援也很好。3 ie ie10起比較好了,之前很差。2,檢視具體的支援情況 ...