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

这是 Modernizr 中使用的技术，基本上所有其他可以使用画布的库：

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

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

if (!isCanvasSupported()){ ...

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

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

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

每个已知的支持画布的浏览器——包括 IE 9——都实现了这个接口；

代码在做什么更简洁明了；

getContext 方法在所有浏览器中的速度都慢得多，因为它涉及创建 HTML 元素。当您需要尽可能多地压缩性能时（例如，在像 Modernizr 这样的库中），这并不理想。

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

补充说明

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

var canvas2DSupported = !!window.CanvasRenderingContext2D;

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

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