WebGL Context上下文_H5之家 - 中国HTML5教程资源分享第一站

要编写一个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示例 -</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.

属性和说明

Canvas

这是一个对创建此 canvas 元素的上下文

drawingBufferWidth

此属性表示绘图缓冲器的实际宽度。它可以不同于 HTMLCanvasElement 的宽度属性。

drawingBufferHeight

此属性表示绘图缓冲器的实际高度。它可以不同于 HTMLCanvasElement 的高度属性。

加QQ群啦！

JAVA技术群(2000人群)： 227270512
MySQL/SQL群(2000人群)： 418407075
Python技术群(2000人群)： 287904175
大数据开发群(2000人群)： 655154550(Java,Python,R,Scala,Hadoop,Spark,zookeeper,kafka等技术)
Web开发群(新群): 460153241 (PHP,HTML/HTML5,JS/JQuery,CSS等技术)
Linux技术群(新群): 479429477(Redhat/Centos,Ubuntu,Shell,运维,监控等技术)
人工智能&深度学习(新群): 456236082 (人工智能，深度学习，算法等技术)

易百教程移动端：请扫描本页面底部(右侧)二维码关注微信公众号，或直接手机访问：