如果在CANVAS上调用2D上下文，WebGL上下文是null答案

【问题标题】：Webgl context is null if 2d context is called on canvas如果在CANVAS上调用2D上下文，WebGL上下文是null
【发布时间】：2017-09-23 19:52:29
【问题描述】：

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

【问题讨论】：

标签： javascript html5-canvas webgl

【解决方案1】：

这是意料之中的，因为 webgl 基本上是 opengl 的封装，主要用于加速 3D 渲染。 getContext("experimental-webgl") 本质上是在告诉浏览器，定义的画布将由 OpenGL/WebGL 独占使用。（可以将 OpenGL/WebGL 用于 2D，但除非您知道自己在做什么，否则这样做会很困难。）如果您尝试在 3D 视图上渲染文本，则必须覆盖两个不同的 DOM 元素（或者在 3D 中使用正确的投影来渲染文本，这又是一个艰难的时间领域）。

【讨论】：

好吧，这是有道理的。谢谢！