检测 HTML5 <canvas>不受支持的最佳方式

javascript html canvas progressive-enhancement graceful-degradation

2022-08-30 04:07:33

处理浏览器不支持HTML5标记情况的标准方法是嵌入一些回退内容，例如：<canvas>

<canvas>Your browser doesn't support "canvas".</canvas>

但页面的其余部分保持不变，这可能是不恰当的或误导性的。我想要一些方法来检测画布不支持，以便我可以相应地呈现页面的其余部分。你会推荐什么？

答案 1

这是 Modernizr 中使用的技术，基本上所有其他执行画布工作的库：

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

由于您的问题是在不支持时进行检测，因此我建议像这样使用它：

if (!isCanvasSupported()){ ...

答案 2

在浏览器中检测画布支持有两种常用的方法：

Matt 关于检查是否存在的建议，也由 Modernizr 库以类似的方式使用：getContext
```
var canvasSupported = !!document.createElement("canvas").getContext;
```
检查接口是否存在，如 WebIDL 和 HTML 规范所定义。IE 9 团队的博客文章中也推荐了此方法。HTMLCanvasElement
```
var canvasSupported = !!window.HTMLCanvasElement;
```

我的建议是后者的变体（请参阅附加说明），原因如下：

每个支持画布的已知浏览器 - 包括IE 9 - 都实现了这个接口;
它更简洁，立即显而易见代码在做什么;
该方法在所有浏览器中的速度要慢得多，因为它涉及创建HTML元素。当您需要尽可能多地压缩性能时（例如，在像Modernizr这样的库中），这并不理想。getContext

使用第一种方法没有明显的好处。这两种方法都可以被欺骗，但这不太可能是偶然发生的。

附加说明

可能仍然需要检查是否可以检索 2D 上下文。据报道，某些移动浏览器可以对上述两项检查返回 true，但返回。这就是为什么 Modernizr 还会检查的结果。然而，WebIDL和HTML - 再次 - 为我们提供了另一个更好，更快的选择：null.getContext('2d').getContext('2d')

var canvas2DSupported = !!window.CanvasRenderingContext2D;

请注意，我们可以完全跳过检查 canvas 元素，直接检查 2D 渲染支持。CanvasRenderingContext2D 接口也是 HTML 规范的一部分。

您必须使用该方法来检测 WebGL 支持，因为即使浏览器可能支持，如果浏览器由于驱动程序问题而无法与 GPU 接口并且没有软件实现，也可能返回 null。在这种情况下，首先检查接口允许您跳过检查：getContextWebGLRenderingContextgetContext()getContext

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

##Performance 比较该方法的性能在 Firefox 11 和 Opera 11 中慢 85-90%，在 Chromium 18 中慢约 55%。getContext