为什么我的 webGL 上下文返回为 null，但还显示它已被检索？

Question

我刚开始使用 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 看看实际发生了什么。

Answer 1

你应该打电话给 depthFUNCdepthFunc

为什么我的 webGL 上下文返回为 null，但还显示它已被检索？

Why is my webGL context returning as null, but also showing that it was retrieved?

javascript

webgl