如果在 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 中使用正确的投影渲染文本,同样是硬时域)。
我写了如下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 中使用正确的投影渲染文本,同样是硬时域)。