不支持检测HTML5

https://stackoverflow.com/questions/2745432

02-10-2019
|

题

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

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

但是页面的其余部分保持不变，这可能是不适当的或误导的。我希望某种方法可以检测非支持画布，以便我可以相应地介绍其余的页面。你会推荐什么？

解决方案

这是现代Izr中使用的技术，基本上是所有其他画布都起作用的库：

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

由于您的问题是为了检测不是支持，我建议这样使用：

if (!isCanvasSupported()){ ...

其他提示

在浏览器中检测帆布支持有两种流行的方法：

马特的建议检查存在 getContext, ，也以类似的方式被现代化图书馆使用：
```
var canvasSupported = !!document.createElement("canvas").getContext;
```
检查存在 HTMLCanvasElement 接口，如 Webidl 和 html 规格。也建议使用这种方法 IE 9团队的博客文章.
```
var canvasSupported = !!window.HTMLCanvasElement;
```

我的建议是后者的变体（请参阅 补充笔记），有几个原因：

每个支持帆布的已知浏览器（包括9）都实现了该界面；
它更简洁，立即明显是该代码在做什么；
这 getContext 方法是 明显较慢 在所有浏览器中, ，因为它涉及创建HTML元素。当您需要尽可能多地挤压性能时（例如，在像ModernIzr这样的库中），这并不理想。

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

补充笔记

仍然需要检查是否可以检索2D上下文。据报道，一些移动浏览器可以返回上述检查，但返回 null 为了 .getContext('2d')。这就是为什么Modernizr还检查 .getContext('2d')。但是，webidl＆html（再次）给了我们一个更好的快点选项：

var canvas2DSupported = !!window.CanvasRenderingContext2D;

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

你必须使用 getContext 方法 用于检测WebGL 支持，因为即使浏览器可能支持 WebGLRenderingContext, getContext() 可以返回空值如果浏览器由于驱动程序问题而无法与GPU接口，并且没有软件实现。在这种情况下，首先检查接口允许您跳过检查 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％，铬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中。这是一个简单的例子渐进式增强, ，我（个人）更喜欢优雅的退化。

为什么不尝试现代化？这是一个提供检测功能的JS库。

引用：

您是否曾经想在CSS中进行陈述以获得Border-Radius之类的酷功能？好吧，有了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()

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

不支持检测HTML5 的最佳方法

补充笔记

性能比较

不支持检测HTML5