如果在画布上调用2D上下文，则WebGL上下文为null

Question

我写了以下JS代码：

var main=function() {
  var CANVAS=document.getElementById("your_canvas");
  CANVAS.width=window.innerWidth;
  CANVAS.height=window.innerHeight;
  //ctx=CANVAS.getContext("2d");
  //ctx.fillText("Hello World",10,50);
  /*========================= GET WEBGL CONTEXT ========================= */
  var GL;
  try {
    GL = CANVAS.getContext("experimental-webgl", {antialias: true});
  } catch (e) {
    alert("You are not webgl compatible :(") ;
    return false;
  }
  var CUBE_VERTEX= GL.createBuffer ();
};

如果我取消注释的两行，则WebGL上下文为null。这是预期的吗？不可能在同一画布上使用2D上下文和WebGL上下文？

Answer 1

这是可以预期的，因为WebGL基本上是围绕OpenGL的包装器，主要用于加速3D渲染。getContext("experimental-webgl")本质上是告诉浏览器，定义的画布将由OpenGL/WebGL专门使用。(可以将OpenGL/WebGL用于2D，但是除非您知道自己在做什么，否则您会很难做到这一点。(如果您要在3D视图之上渲染文本，则必须覆盖两个不同的DOM元素(或在3D中使用正确的投影渲染文本，再次很难的时间 - 时间(。