判断浏览器是否支持WebGL

1
const canvas = document.getElementById("GameCanvas");
2
const contexts = ["webgl2", "webgl", "experimental-webgl"];
3
let gl = null;
4

5
for (const type of contexts) {
6
  gl = canvas.getContext(type);
7
  if (gl) break;
8
}
9

10
if (!gl) {
11
  console.log("该浏览器不支持WebGL");
12
}

1
const canvas = document.getElementById("GameCanvas");
2
canvas.addEventListener(
3
  "webglcontextlost",
4
  function (e) {
5
    console.log("webglcontextlost", e);
6
  },
7
  false
8
);

1
const canvas = document.getElementById("GameCanvas");
2
const contexts = ["webgl2", "webgl", "experimental-webgl"];
3
let gl = null;
4

5
for (const type of contexts) {
6
  gl = canvas.getContext(type);
7
  if (gl) break;
8
}
9

10
if (!gl) {
11
  console.log("该浏览器不支持WebGL");
12
} else {
13
  var lose_context = gl.getExtension("WEBGL_lose_context"); // 使用 var 变量提升
14
  lose_context.loseContext();
15
}

1
const canvas = document.getElementById("GameCanvas");
2
canvas.addEventListener(
3
  "webglcontextrestored",
4
  (e) => {
5
    console.log("webglcontextrestored", e);
6
  },
7
  false
8
);

1
// 必须先使用前面模拟webgl lost方法
2
lose_context.restoreContext();