检测浏览器是否支持HTML5 中<canvas的最佳方法是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (234)

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

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

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

提问于
用户回答回答于

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

  1. 马特的检查存在的建议getContext,也被Modernizr图书馆以类似的方式使用: var canvasSupported = !!document.createElement("canvas").getContext;
  2. 检查WebIDL和HTML规范HTMLCanvasElement定义的接口是否存在。IE 9团队的博客文章也建议采用这种方法。 var canvasSupported = !!window.HTMLCanvasElement;

我的建议是后者的一种变化(参见附加说明),原因如下:

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

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

补充笔记

可能仍需要检查是否可以检索2D上下文。据了解,一些移动浏览器可以同时为上述检查返回true,但返回null.getContext('2d')。这就是为什么Modernizr也会检查结果.getContext('2d')。但是,WebIDL和HTML再次为我们提供了另一种更好,更快的选择:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

请注意,我们可以完全跳过检查画布元素,直接检查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%。

热门问答

怎样实现PDF文件在线浏览?

幻象丛林RESTful 服务开发者
推荐
一般浏览器自带pdf浏览,比如谷歌浏览器,你打开pdf结尾的文件就是浏览界面。 存放在cos中的pdf文件打开如果是直接下载的话,需要设置静态网站,才能正常访问存储桶中的文件,而不是直接下载。 开启静态网站配置后,您需要使用静态网站域名访问 COS 源站才能生效,如果使用 COS...... 展开详请

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

mysql 1h1g能带动多大的数据?

学生路人
推荐
您好,MySQL的处理速度主要看内存的缓存空间大小,缓存空间是否够用主要看业务热数据,而业务热数据是与业务访问相关的,腾讯云MySQL的存储引擎是固定的,都是innodb存储引擎,所以处理器这里不用考虑太多,主要关注innodb_buffer_pool_size是否够用,建议您先...... 展开详请

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

请问bugly上报的服务器是在哪?如果要发行海外版本,能把上报服务器调成海外吗?

所属标签

扫码关注云+社区

领取腾讯云代金券