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

Question

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

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

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

Answer 1

这是Modernizr以及基本上所有其他执行画布工作的库中使用的技术：function isCanvasSupported(){&nbsp; var elem = document.createElement('canvas');&nbsp; 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。这是“ 渐进增强”的简单示例，我（个人）更喜欢“优雅降级”。