如何快速检测网页<canvas>元素使用的上下文类型（2D/WebGL）

浏览器控制台快速判断操作步骤 #

• 打开开发者工具（按F12或Ctrl+Shift+I），切换到「Elements」面板，找到目标<canvas>标签
• 右键点击该标签，选择「Store as global variable」，此时控制台会生成一个临时变量（比如temp1）
• 在「Console」面板输入命令：
  • 输入 temp1.getContext('2d')，如果返回包含CanvasRenderingContext2D的对象，说明用的是2D上下文
  • 如果上面返回null，再试 temp1.getContext('webgl') 或 temp1.getContext('webgl2')，返回有效对象则是WebGL/WebGL2上下文

代码层面判断逻辑 #

如果是在自己的代码里判断，或者批量检查页面中的canvas，可以用以下方式：

• 尝试获取不同类型的上下文，根据返回值判断：

function checkCanvasContextType(canvas) {
  // 先检查2D上下文
  if (canvas.getContext('2d')) {
    return '2D';
  }
  // 再检查WebGL系列
  const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
  if (gl) {
    return gl instanceof WebGL2RenderingContext ? 'WebGL2' : 'WebGL';
  }
  return '未创建有效上下文';
}

• 如果已经持有上下文对象的引用，直接判断实例类型：

// 假设context是已获取的上下文对象
if (context instanceof CanvasRenderingContext2D) {
  console.log('这是2D上下文');
} else if (context instanceof WebGLRenderingContext || context instanceof WebGL2RenderingContext) {
  console.log('这是WebGL/WebGL2上下文');
}

小提示 #

有些页面里的WebGL canvas可能会关联Three.js、Babylon.js这类3D库的脚本，不过这只能作为参考，最准确的还是通过控制台或代码检查上下文对象本身。

内容的提问来源于stack exchange，提问作者Real Dreams