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

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

Matt's suggestion检查是否存在getContext，也是由Modernizr库以类似方式使用的：
```
var canvasSupported = !!document.createElement("canvas").getContext;
```
检查HTMLCanvasElement和WebIDL规范定义的var canvasSupported = !!window.HTMLCanvasElement;接口是否存在。在HTML中也建议采用这种方法。
```
getContext
```

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

每个已知的支持画布的浏览器 - 包括IE 9 - 都实现了这个界面;
它更简洁，更明显地代码正在做什么;
null方法是a blog post from the IE 9 team，因为它涉及创建HTML元素。当你需要尽可能多地挤压性能时（例如在Modernizr这样的库中），这并不理想。

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

附加说明

可能仍需要检查是否可以检索2D上下文。据报道，某些移动浏览器可以在上述两项检查中返回true，但对.getContext('2d')返回.getContext('2d')。这就是Modernizr也检查var canvas2DSupported = !!window.CanvasRenderingContext2D;的结果的原因。但是，WebIDL＆amp; HTML - 再次 - 为我们提供了另一个更好的significantly slower across all browsers选项：

getContext

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

您必须使用WebGLRenderingContext方法来检测WebGL 支持，因为即使浏览器可能支持getContext()，{{1}如果浏览器由于驱动程序问题而无法与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
    }
}

性能比较

{1}}方法的性能在Firefox 11和Opera 11中慢85-90％，在Chromium 18中慢55％。

CanvasRenderingContext2D

Answer 3

我创建画布对象时，通常会检查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。这是Progressive Enhancement的一个简单例子，我（个人）更喜欢优雅降级。

Answer 4

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

引用：

你有没有想做过 CSS中的if语句用于可用的酷炫功能边界半径？那么，有了Modernizr 你可以做到这一点！

Answer 5

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.");
}

Answer 6

这里可能有一些问题 - 有些客户不支持所有画布方法。

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)

Answer 7

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

caniuse.canvas()

Answer 8

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

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 :(*/
}

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

8 个答案:

附加说明

性能比较