要編寫一個WebGL的應用程式，第一步是讓WebGL渲染上下文 - Context 對象。這個對象與 WebGL 繪製緩衝區進行交互，可以調用所有WebGL的方法。執行以下操作來獲取WebGL的上下文-
-
創建HTML5 canvas
-
獲取畫布 canvas 的 ID
-
獲取WebGL
創建HTML5 canvas元素
我們知道，建立一個HTML5 canvas 元素 -
-
在HTML5主體內寫入canvas語句聲明
-
給定 canvas 一個ID
- 使用高度和寬度(height & width)屬性(可選)更改畫布尺寸
一個例子在這裏應該更清楚。
示例
下麵的例子說明如何創建一個 canvas 元素。創建了一個邊框使用 CSS 可視性畫布的尺寸(500×500)。複製並粘貼到下麵的代碼到 my_canvas.html 檔。
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas示例 -www.xuhuhu.com</title
<style>
#mycanvas{border:1px solid blue;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "300" height = "300"></canvas>
</body>
</html>
這將產生以下結果 -
獲取Canvas的ID
Canvas ID是通過調用DOM(文檔對象模型)的getElementById()方法獲得的。這個方法接受一個字串值作為參數，所以我們傳遞了當前 Canvas 的名字。
例如，如果 canvas 名稱是my_canvas，則canvas ID被得到 - 如圖如下
var canvas = document.getElementById('my_Canvas');
獲取WebGL的繪圖上下文
為了得到 WebGLRenderingContext 對象(或圖形的WebGL上下文對象或只在WebGL的情況下)，調用當前 HTMLCanvasElement 的getContext()方法。getContext()的語法如下 -
canvas.getContext(contextType, contextAttributes);
通過 WebGL字串或experimental-webgl 作為 contentType。contextAttributes參數是可選的。 (雖然在進行這一步，請確保您的流覽器實現了WebGL 1.0版本(OpenGL ES 2.0))。
下麵的代碼片段展示了如何獲取WebGL的渲染上下文。在這裏，gl是參考變數所獲得的上下文對象。
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');
WebGLContextAttributes
參數 WebGLContextAttributes 不是強制性的。此參數提供接受布爾值，如下面列出各種選項 -
| Alpha |
如果它的值是 true，它提供了一個alpha緩衝區到畫布上。默認情況下，它的值是 true
|
| depth |
如果它的值是true，會得到一個繪圖的緩衝區，其中包含至少16位的深度緩衝。默認情況下，它的值是true
|
| stencil |
如果它的值是true，會得到一個繪圖的緩衝區，其中包含至少8位的範本緩存。默認情況下，它的值是false
|
| antialias |
如果它的值是true，會得到一個繪圖緩衝區，執行抗鋸齒。默認情況下，它的值是true
|
| premultipliedAlpha |
如果它的值是true，會得到一個繪圖緩衝區，其中包含的顏色與預乘alpha。默認情況下它的值是true
|
| preserveDrawingBuffer |
如果它的值是true，緩衝區將不會被清零，直到被清除或由作者改寫將保留它們的值。默認情況下，它的值是false
|
下麵的代碼片段展示了如何創建一個WebGL的上下文範本緩存，這將不執行抗鋸齒。
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });
在創建 WebGLRenderingContext 的時候，一個繪圖緩衝器被創建。上下文對象管理OpenGL 狀態，並呈現到圖形緩衝區。
WebGLRenderingContext
它是 WebGL 的主要介面。它表示 WebGL 繪圖上下文。該介面包含了所有用於在繪圖緩衝執行各種任務的方法。此介面的屬性給出在下表中。
| S.No. |
屬性和說明
|
|---|---|
| 1 |
Canvas
這是一個對創建此 canvas 元素的上下文
|
| 2 |
drawingBufferWidth
此屬性表示繪圖緩衝器的實際寬度。它可以不同於 HTMLCanvasElement 的寬度屬性。
|
| 3 |
drawingBufferHeight
此屬性表示繪圖緩衝器的實際高度。它可以不同於 HTMLCanvasElement 的高度屬性。
|