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

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

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

但是页面的其余部分保持不变，这可能是不合适的或令人误解的。我想要某种检测画布不受支持的方式，以便可以相应地显示页面的其余部分。你会推荐什么？

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

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

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

if (!isCanvasSupported()){ ...

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

1. 马特（Matt）建议检查的存在getContext，并由Modernizr库以类似方式使用：

   var canvasSupported = !!document.createElement("canvas").getContext;

2. 检查HTMLCanvasElement接口的存在，如WebIDL和HTML规范所定义。IE 9团队的博客文章中也推荐了这种方法。

   var canvasSupported = !!window.HTMLCanvasElement;

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

• 每个已知的支持canvas的浏览器（包括IE 9）都实现了此接口；
• 简洁明了，立即可见代码在做什么。
• 在所有浏览器中，该getContext方法的速度明显慢，因为它涉及创建HTML元素。当您需要压缩尽可能多的性能时（例如在类似Modernizr的库中），这不是理想的选择。

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

补充笔记

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

var canvas2DSupported = !!window.CanvasRenderingContext2D;

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

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

性能比较

该getContext方法的性能在Firefox 11和Opera 11中降低了85-90％，在Chromium 18中降低了约55％。

getContext创建画布对象时，通常会进行检查。

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

如果支持，则可以继续画布设置并将其添加到DOM。这是“ 渐进增强”的简单示例，我（个人）更喜欢“优雅降级”。

为什么不尝试 modernizr？这是一个提供检测功能的JS库。

引用：

您是否曾经想过在CSS中进行if语句以获取诸如边框半径之类的酷功能？好吧，有了Modernizr，您就可以做到！

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}

这里可能有一个陷阱-一些客户端不支持所有的 canvas方法。

var hascanvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(hascanvas)

您可以使用canisuse.js脚本检测您的浏览器是否支持画布

caniuse.canvas()

如果要获取画布的上下文，则最好将其用作测试：

var canvas = document.getElementById('canvas');
var context = (canvas.getContext?canvas.getContext('2d'):undefined);
if(!!context){
  /*some code goes here, and you can use 'context', it is already defined*/
}else{
  /*oof, no canvas support :(*/
}