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中的正确投影渲染文本，再次是时间难度较大的区域）。

如果在画布上调用2d上下文，则Webgl上下文为null

1 个答案: