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

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

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

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

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

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

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

 if (!isCanvasSupported()){ ... 

在浏览器中有两种检测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%。

简单的比较表,点击在您的浏览器中运行测试

当我创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。 这是一个渐进增强的简单例子,我个人喜欢优雅的降级。

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

引用:

你有没有想过如果你的CSS中的语句可用的像边界半径酷function? 那么,用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脚本来检测您的浏览器是否支持canvas

 caniuse.canvas()