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

这是在现代化中使用的技术,基本上是所有其他可以使用画布的库:

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

因为你的问题是在什么时候被发现 不 支持,我建议这样使用它:

if (!isCanvasSupported()){ ...

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

1. Matt's suggestion 检查是否存在 getContext 也被现代化图书馆以类似的方式使用:

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

2. 检查是否存在 HTMLCanvasElement 接口,由 WebIDL 和 HTML _ a blog post from the IE 9 team 。

   var canvasSupported = !!window.HTMLCanvasElement;
   

我的建议是后者的一个变体(见 附加说明 ,原因如下:

• 包括IE9在内的所有支持画布的已知浏览器都实现了这个界面;
• 代码所做的工作更加简洁和明显;
• 这个 获取上下文 方法是 significantly slower across all browsers ,因为它涉及到创建一个HTML元素。当您需要尽可能多地压缩性能时(例如在modernizer之类的库中),这是不理想的。

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

附加说明

可能仍然需要检查是否可以检索到二维上下文。据报道,一些移动浏览器可以为上述两项检查返回true,但返回 null 对于 .getContext('2d') . .getContext('2d') . 然而,WebIDL&html又给了我们另一个更好的方法, faster 选项:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

请注意,我们可以完全跳过对画布元素的检查,直接检查是否支持二维渲染。这个 CanvasRenderingContext2D 接口也是HTML规范的一部分。

你 必须 使用 获取上下文 方法 用于检测WebGL 支持,因为即使浏览器可能支持 WebGLRenderingContext , getContext() 可能会回来 无效的 如果由于驱动程序问题,浏览器无法与GPU接口,并且没有软件实现。在这种情况下,首先检查接口允许您跳过 获取上下文 :

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
    }
}

性能比较

执行 获取上下文 在火狐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。这是一个简单的例子 Progressive Enhancement 我个人更喜欢优雅的堕落。

为什么不试试呢 modernizr ?它是一个JS库,提供检测功能。

报价:

你有没有想过 在您的CSS中的if语句 提供酷功能,如 边界半径?嗯,有了现代化 你可以做到!

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

这里可能有一个gotcha-一些客户不支持 全部的 画布方法。

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()