javascript - 如果在 Canvas 上调用 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。这是预期的吗？无法在同一 Canvas 上使用 2D 上下文和 webgl 上下文？

Answer 1

这是预料之中的，因为 webgl 基本上是 opengl 的包装器，主要用于加速 3D 渲染。 getContext("experimental-webgl") 本质上是告诉浏览器，定义的 Canvas 仅供 OpenGL/WebGL 使用。 (可以使用 OpenGL/WebGL 进行 2D，但除非您知道自己在做什么，否则这样做会很困难。)如果您尝试在 3D View 之上渲染文本，则必须覆盖两个不同的 DOM 元素(或在 3D 中使用正确的投影渲染文本，同样是困难的时间领域)。