为什么我的webGL上下文返回为null,但也显示它已被检索?

时间:2016-03-17 11:29:03

标签: javascript webgl

我是从webGL开始的,我对某些事情感到有些困惑。我在try / catch中获取了上下文,并且我实际上表明尝试成功了,但是,我还显示我的上下文为空。任何人都可以向我解释为什么会这样吗?根据教程,我应该看到一个黑盒子,但我不是。

HTML

<body>
    <canvas id="webGL" width="500" height="500"></canvas>
</body>

JS

window.addEventListener("load", function(){
    start();
    var gl;//Holds the WebGL context
    function start(){
        var canvas = document.getElementById("webGL");
        gl = initWebGL(canvas);//Initializes the GL context
        if(gl){
            gl.clearColor(0.0, 0.0, 0.0, 1.0);//Sets the clear color to black
            gl.enable(gl.DEPTH_TEST);//Enables depth testing
            gl.depthFUNC(gl.LEQUAL);//Near things obsure far things
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);//Clears the color and depth buffer
        }
    }

    function initWebGL(canvas){
        gl = null;
        try{
            //Tries to grab the standard context.  If it fails, fallback to the experimental version
            gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
            console.log("Got it");
            console.log(gl);
        }
        catch(e){
            //If there is no GL context, give up
            if(!gl){
                gl = null;
                console.log("You suck");
                console.log(gl);
            }
        }
        return gl;
    }
})

在这里pen看看实际发生了什么。

1 个答案:

答案 0 :(得分:0)

当您致电depthFUNC

时,您正在致电depthFunc