处理浏览器不支持HTML5<canvas>
标签的情况的标准方法是嵌入一些后备内容,例如:
<canvas>Your browser doesn't support "canvas".</canvas>
但是页面的其余部分保持不变,这可能是不合适的或令人误解的。我想要一种检测画布不受支持的方法,以便可以相应地显示页面的其余部分。你会推荐什么?
这是Modernizr以及基本上所有其他执行画布工作的库中使用的技术:
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
由于您的问题是在不支持时进行检测的,因此我建议像这样使用它:
if (!isCanvasSupported()){ ...
有两种流行的方法可以检测浏览器中的画布支持:
-
马特(Matt)建议检查的存在
getContext
,并由Modernizr库以类似方式使用:var canvasSupported = !!document.createElement("canvas").getContext;
-
检查
HTMLCanvasElement
接口的存在,如WebIDL和HTML规范所定义。IE 9团队的博客文章中也推荐了这种方法。var canvasSupported = !!window.HTMLCanvasElement;
我的建议是后者的一种变体(请参阅附加说明),原因如下:
- 每个支持画布的已知浏览器(包括IE 9)都实现了此接口;
- 简洁明了,立即可见代码在做什么。
- 在所有浏览器中,此
getContext
方法的速度明显慢,因为它涉及创建HTML元素。当您需要尽可能提高性能时,这不是理想的选择(例如,在类似Modernizr的库中)。
使用第一种方法没有明显的好处。两种方法都可以被欺骗,但这不太可能偶然发生。
补充说明
仍然有必要检查2D上下文是否可以检索。据报道,某些移动浏览器可以为上述两项检查返回true,但是null
为.getContext('2d')
。这就是为什么Modernizr还检查的结果的原因.getContext('2d')
。但是,WebIDL和HTML再次为我们提供了另一个更好,更快的选择:
var canvas2DSupported = !!window.CanvasRenderingContext2D;
注意,我们可以完全跳过对canvas元素的检查,而直接检查2D渲染支持。该CanvasRenderingContext2D
接口也是HTML规范的一部分。
您必须使用这种getContext
方法来检测WebGL的支持,因为即使浏览器可能支持WebGLRenderingContext
,getContext()
但如果由于驱动程序问题而导致浏览器无法与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
}
}
性能比较
该getContext
方法的性能在Firefox 11和Opera 11中降低了85-90%,在Chromium 18中降低了约55%。
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。这是“渐进增强”的简单示例,我(个人)更喜欢“优雅降级”。
为什么不尝试modernizr?这是一个提供检测功能的JS库。
引用:
您是否曾经想过在CSS中进行if语句以获取诸如边框半径之类的出色功能?好吧,有了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.");
}
这里可能有一个陷阱,某些客户端不支持所有画布方法。
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脚本检测您的浏览器是否支持画布
caniuse.canvas()
如果要获取画布的上下文,则最好将其用作测试:
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 :(*/
}
文章标签:canvas , graceful-degradation , html , javascript , progressive-enhancement
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!