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

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

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

但是页面的其余部分保持不变，这可能是不恰当的或误导性的。 我想要一些检测canvas不支持的方式，以便我可以相应地显示我的页面的其余部分。 你会推荐什么？

Answer 1

这是Modernizr中使用的技术，基本上所有其他的图书馆都在进行canvas工作：

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

由于你的问题是不支持的检测，我推荐使用它，如下所示：

 if (!isCanvasSupported()){ ... 

Answer 2

在浏览器中有两种检测canvas支持的stream行方法：

1. Matt提供的检查getContext是否存在的build议 ，也被Modernizr库以类似的方式使用：

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

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

    var canvasSupported = !!window.HTMLCanvasElement; 

我的build议是后者的一个变种（见附加说明 ），原因如下：

• 每个已知的支持canvas的浏览器（包括IE 9）都实现了这个接口。
• 代码在做什么更简洁明了，
• getContext方法在所有浏览器中都显着较慢 ，因为它涉及到创build一个HTML元素。 当你需要尽可能多的性能时，这是不理想的（例如像Modernizr这样的库）。

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

补充笔记

可能仍然需要检查是否可以检索2D上下文。 据报道，一些移动浏览器可以为上述两个检查返回true，但为.getContext('2d')返回null 。 这就是为什么Modernizr也检查.getContext('2d') 。 但是，WebIDL＆HTML又为我们提供了另一种更好， 更快的select：

 var canvas2DSupported = !!window.CanvasRenderingContext2D; 

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

您必须使用getContext方法来检测WebGL支持，因为即使浏览器可能支持WebGLRenderingContext ，如果浏览器由于驱动程序问题而无法与GPU进行交互，并且没有软件实现，则getContext()可能会返回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％。

Answer 3

当我创build我的canvas对象时，我通常运行一个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); }()); 

如果支持，则可以继续canvas设置并将其添加到DOM。 这是一个渐进增强的简单例子，我个人喜欢优雅的降级。

Answer 4

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

引用：

你有没有想过如果你的CSS中的语句可用的像边界半径酷function？ 那么，用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

这里可能有一些问题 – 有些客户端不支持所有的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) 

Answer 7

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

 caniuse.canvas()