WebGL Context上下文
要編寫一個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 文件。
這將產生以下結果 -
獲取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 的高度屬性。