如果在 canvas 上调用 2d 上下文,则 Webgl 上下文为空

Webgl context is null if 2d context is called on canvas

我写了如下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 上下文

这是预料之中的,因为 webgl 基本上是 opengl 的包装器,主要用于加速 3D 渲染。 getContext("experimental-webgl") 本质上是告诉浏览器,定义的 canvas 将由 OpenGL/WebGL 独占使用。 (可以对 2D 使用 OpenGL/WebGL,但除非您知道自己在做什么,否则这样做会给自己带来困难。) 如果您尝试在 3D 视图上渲染文本,则必须叠加两个不同的 DOM 元素(或在 3D 中使用正确的投影渲染文本,同样是硬时域)。