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

Question

处理浏览器不支持HTML5 <canvas>标签的情况的标准方法是嵌入一些后备内容，例如：<canvas>Your browser doesn't support "canvas".</canvas>但是页面的其余部分保持不变，这可能是不合适的或令人误解的。我想要某种检测画布不受支持的方法，以便可以相应地显示页面的其余部分。你会推荐什么？

Answer 1

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

function isCanvasSupported(){

  var elem = document.createElement('canvas');

  return !!(elem.getContext && elem.getContext('2d'));

}

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

if (!isCanvasSupported()){ ...

Answer 2

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。这是“ 渐进增强”的简单示例，我（个人）更喜欢“优雅降级”。