WebGL-Context

要编写WebGL应用程序，第一步是获取WebGL渲染Context对象。该对象与WebGL绘图缓冲区交互，并且可以调用所有WebGL方法。执行以下操作以获得WebGLContext：

创建一个HTML 5画布
获取画布ID
获取WebGL

创建HTML-5画布元素

在第5章中，我们讨论了如何创建HTML-5 canvas元素。在HTML-5文档的正文中，编写一个画布，为其命名，然后将其作为参数传递给属性id。您可以使用width和height属性（可选）定义画布的尺寸。

例

下面的示例演示如何创建尺寸为500×500的canvas元素。我们使用CSS创建了画布的边框以提高可见性。将以下代码复制并粘贴到名为my_canvas.html的文件中。

<!DOCTYPE HTML>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>创建HTML-5画布元素 - web176教程网|web176.com</title>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

运行看下效果吧。

获取画布ID

创建画布之后，必须获取WebGL Context。获取WebGL绘图Context的第一件事是获取当前canvas元素的ID。

画布ID是通过调用DOM（文档对象模型）方法getElementById()获得的。此方法接受字符串值作为参数，因此我们将当前画布的名称传递给它。

例如，如果画布名称为my_canvas，则获取画布ID，如下所示-

var canvas = document.getElementById('my_Canvas');

获取WebGL绘图上下文

要获取WebGLRenderingContext对象（或WebGL Drawing上下文对象或简单的WebGL上下文），请调用当前HTMLCanvasElement的getContext()方法。getContext（）的语法如下-

canvas.getContext(contextType, contextAttributes);

将字符串webgl或experimental-webgl传递为contentType。该contextAttributes参数是可选。（在继续执行此步骤时，请确保您的浏览器实现了WebGL版本1（OpenGL ES 2.0））。

以下代码段显示了如何获取WebGL渲染上下文。这里GL是参考变量所获得的上下文对象。

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

参数WebGLContextAttributes不是必需的。此参数提供了接受布尔值的各种选项，如下所示-

序号	属性和说明
1个	Alpha 如果其值为true，它将为画布提供一个alpha缓冲区。默认情况下，其值为true。
2	depth 如果其值为true，则将获得一个绘图缓冲区，其中包含至少16位的深度缓冲区。默认情况下，其值为true。
3	stencil 如果其值为true，则将获得一个绘图缓冲区，其中包含至少8位的模板缓冲区。默认情况下，其值为false。
4	antialias 如果其值为true，则将获得执行抗锯齿的图形缓冲区。默认情况下，其值为true。
5	premultipliedAlpha 如果其值为true，则将获得一个绘图缓冲区，其中包含带有预乘alpha的颜色。默认情况下，其值为true。
6	preserveDrawingBuffer 如果其值为true，则缓冲区将不被清除，并保留其值，直到作者清除或覆盖。默认情况下，其值为false。

下面的代码片段显示了如何使用模板缓冲区创建WebGL context。

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

在创建WebGLRenderingContext时，将创建一个绘图缓冲区。Context对象管理OpenGL状态并渲染到绘图缓冲区。

WebGLRenderingContext

它是WebGL中的主要接口。它表示WebGL绘图context。该接口包含用于在绘图缓冲区上执行各种任务的所有方法。下表中给出了此接口的属性。

序号	属性和说明
1个	Canvas 这是对创建此上下文的canvas元素的引用。
2	drawingBufferWidth 此属性表示绘图缓冲区的实际宽度。它可能不同于HTMLCanvasElement的width属性。
3	drawingBufferHeight 此属性表示绘图缓冲区的实际高度。它可能不同于HTMLCanvasElement的height属性。