Javascript 面向对象的WebGL上下文包装失败

我开始使用WebGL进行开发，对JavaScript知之甚少。我试图创建一个类来管理WebGL上下文

我有以下内容：我的HTML页面：

星网

类

Contexto.js

：

函数上下文（画布）
{
this.canvas=画布；
this.contextoGL；
this.contexto_creado=false；
}
Contexto.prototype.crearContextoWebGL=函数（）
{
尝试
{        
this.contextoGL=WebGLDebugUtils.makeDebugContext（this.canvas.getContext（“webgl”）；
如果（！this.contextoGL）
this.contexto_creado=false；
其他的
this.contexto_creado=true；
}
捕获（e）
{
console.log（“没有与gl相关的文件”）；
}
};
Contexto.prototype.contextoCreado=函数（）
{
返回this.contexto_creado；
};
Contexto.prototype.getGL=函数（）
{
返回this.contextoGL；
};
Contexto.prototype.setColor=函数（r、g、b、a）
{
this.contextoGL.clearColor（r，g，b，a）；
};

类

application.js

：

window.onload=main；
函数main（）
{
var canvas=document.getElementById（“屏幕画布”）；
var contextoWebGL=新的Contexto（画布）；
contextoWebGL.crearContextoWebGL（）；
log（contextoWebGL.contextoCreado（））；
contextoWebGL.setColor（0.5161561076529324,1,0.7,1）；
}

当我试图改变背景时

contextoWebGL.setColor（0.5161561076529324,1,0.7,1）

我得到以下错误：

UncaughtTypeError:对象#没有“clearColor”方法

创建面向对象上下文的正确代码是什么

---

在JavaScript应用程序中使用面向对象的代码时，效率会受到影响吗？

这里有两个问题：您没有获得上下文，并且没有正确处理该故障

WebGLDebugUtils.makeDebugContext

不会测试是否给定了实际的上下文，因此如果

getContext

返回null，它将生成一个行为与您看到的一样的无用对象。您应该首先测试是否成功获得WebGL上下文，然后使用

makeDebugContext

包装它

this.contextoGL = this.canvas.getContext( "webgl" );
if( !this.contextoGL ) {
    this.contexto_creado = false;
} else {
    this.contexto_creado = true;
    this.contextoGL = WebGLDebugUtils.makeDebugContext( this.contextoGL );
}

这将导致您的代码正确报告无法获取上下文。这种结构还可以更容易地选择不使用调试上下文，以获得更好的性能

为了成功获得WebGL上下文，您可能需要尝试名称“实验WebGL”以及“WebGL”。例如，Chrome不支持上下文名称“webgl”