WebGL教程

WebGL - 上下文

要编写WebGL应用程序，第一步是获取WebGL渲染上下文对象.此对象与WebGL绘图缓冲区交互，可以调用所有WebGL方法.执行以下操作以获取WebGL上下文 :

创建HTML-5画布
获取画布ID
获取WebGL

创建HTML-5画布元素

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

示例

以下示例说明如何创建画布尺寸为500&times的元素; 500.我们使用CSS为画布创建了一个边框.将以下代码复制并粘贴到名为 my_canvas.html 的文件中.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

它将产生以下结果 :

获取画布ID

创建后在画布上，你必须得到WebGL上下文.获取WebGL绘图上下文的第一件事是获取当前canvas元素的id.

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

例如，如果画布名称是 my_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(OpenGL ES 2.0)).

以下代码段显示如何获取WebGL渲染上下文.这里 gl 是获取的上下文对象的引用变量.

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

WebGLContextAttributes

参数 WebGLContextAttributes 不是必需的.此参数提供接受下面列出的布尔值的各种选项 :

Sr.No .	属性&描述
1	Alpha 如果其值为true，则为画布提供alpha缓冲区. 默认情况下，值为真.
2	深度如果其值为true，您将获得一个包含至少16位深度缓冲区的绘图缓冲区. 默认情况下，其值为true.
3	模具如果其值为true，您将获取一个包含至少8位模板缓冲区的绘图缓冲区. 默认情况下，其值为false.
4	antialias 如果其值为true，您将获得一个执行消除锯齿的绘图缓冲区. 默认情况下，其值为true.
5	premultipliedAlpha 如果其值为true，您将获得一个包含颜色的绘图缓冲区预乘alpha. 默认情况下，其值为true.
6	preserveDrawingBuffer 如果它的值如果是，则缓冲区将不会被清除并保留其值，直到作者清除或覆盖为止. 默认情况下，其值为false.

以下代码片段显示了如何使用模板缓冲区创建WebGL上下文，该模板缓冲区不会执行抗锯齿.

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

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

WebGLRenderingContext

它是WebGL中的主要接口.它代表WebGL绘图上下文.此接口包含用于在绘图缓冲区上执行各种任务的所有方法.此接口的属性如下表所示.

Sr.No.	属性&说明
1	画布这是对创建此上下文的canvas元素的引用.
2	drawingBufferWidth 此属性表示绘图缓冲区的实际宽度.它可能与HTMLCanvasElement的width属性不同.
3	drawingBufferHeight 此属性表示绘图缓冲区的实际高度.它可能与HTMLCanvasElement的height属性不同.

Sr.No.

属性&说明

画布

这是对创建此上下文的canvas元素的引用.

drawingBufferWidth

此属性表示绘图缓冲区的实际宽度.它可能与HTMLCanvasElement的width属性不同.

drawingBufferHeight

此属性表示绘图缓冲区的实际高度.它可能与HTMLCanvasElement的height属性不同.