要编写一个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.yiibai.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 的高度属性。
|
