html 判断页面支持canvas,HTML5 Canvas之测试浏览器是否支持Canvas的方法

在获取HTML页面上Canvas元素的引用后，我们需要测试一下该元素是否包含“上下文”(context)。Canvas的上下文指的是由浏览器定义的用于绘画的平面。简单地说，如果上下文不存在的话，Canvas也就名存实亡了。测试浏览器是否支持Canvas有好几种方法。第一种方法是检查HTML页面中Canvas元素的getContext方法是否存在：

复制代码

代码如下:

if (!theCanvas || !theCanvas.getContext) {

return;

}

事实上，上述代码测试了两点：其一，测试了theCanvas是否为false(如果id不存在的话，document.getElementById()会返回false)；其二，测试了getContext()函数是否存在。

在上述代码中，如果测试失败，那么return语句执行，程序终止。

另一种方法是创建一个专门用于判断Canvas是否得以支持的函数，而在该函数中，实时生成一个Canvas元素来进行这种判断 — 这种方法很流行，Mark Pilgrim在他的HTML5网站http://diveintohtml5.org中提到了这种方案：

复制代码

代码如下:

function canvasSupport() {

return !!document.createElement('canvas').getContext;

}

function canvasApp() {

if (!canvasSupport()) {

return;

}

我们最钟爱的方法是使用modernizr.js库(在http://www.modernizr.com中可以找到)。Modernizr是一个简单易用的轻量级JavaScript库，用于测试各种Web技术的兼容性 — 它提供了很多静态的Boolean方法，可以用来测试当前Canvas是否得到支持。

在HTML页面中引入modernizr很简单，从http://www.modernizr.com上下载代码，然后在HTML页面中包含这个外部js文件即可：

复制代码

代码如下:

使用Modernizr测试Canvas的支持性，只需将上面的canvasSupport函数改动一下就可以了：

复制代码

代码如下:

function canvasSupport() {

return Modernizr.canvas;

}

我们认为，判断浏览器是否支持Canvas，使用Modernizr.js是最好的方案。

html 判断页面支持canvas,HTML5 Canvas之测试浏览器是否支持Canvas的方法相关推荐

HTML5中如何检查浏览器是否支持本地存储
如果你的浏览器支持该特性的话,那么全局对象:window上会有一个localStorage的属性,反之,你的浏览器不支持的话,那么该属性值为undefined JavaScript function ...
win10edge启用html5,Win 10 Edge浏览器极速运行的设置方法
Win 10 Edge浏览器怎么才能更快浏览网页?已经升级到Win10正式版的用户可能最近使用Edge浏览器比较多,这款浏览器相对而言比较轻便,很多时候速度也比较快.但是偶尔也会出现比较卡的情况.就算 ...
一键代理浏览器_支持IPv6的防关联指纹浏览器 VMLogin 支持模拟电脑名称、支持修改MAC地址、支持模拟真人输入、支持自定义经纬度...
VMLogin防关联指纹纹浏览器:用于亚马逊测评.FACEBOOK广告投放等多平台多账号批量注册多登防关联管理软件.用虚拟浏览器配置文件代替若干电脑,具有浏览器指纹防护功能,每个浏览器文件的Cooki ...
html5不支持的属性,HTML5 常用语法一览(列举不支持的属性)
HTML头部标记标记描述 HTML5标准定义页面中所有链接的基准URL 设定显示在浏览器左上方的标题内容表明该文档是一个可用于检索的网关脚本不支持文档本身的元信息,例如查询关键词,有效期等 ...
HTML5 浏览器支持（怎么样让低版本浏览器支持html5?）
你可以让一些较早的浏览器(不支持HTML5)支持 HTML5. 现代的浏览器都支持 HTML5. 此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理. 正因为如此,你可以 &q ...
浏览器html5视频抓取,检测浏览器是否支持html5视频的代码
复制代码代码如下: 函数checkVideo(){if(!!document.createElement('video').canPlayType){varvidTest=document.crea ...
（一）检测浏览器是否支持websocket
二.创建一个支持 WebSocket 的服务 1.从pywebsocket下载mod_pywebsocket(亲git clone),地址在这里啦~,这里请注意,mod_pywebsocket需要py ...
IE7及以下浏览器不支持json的解决方法
在页面 alert(JSON);//大写 IE7及以下浏览器不支持json所以不会弹出object 解决方法打开json.org json的官网找到javascript的json2.js然后会转到gi ...
websocket测试工具，支持ws wss客户端
websocket测试工具,支持ws wss客户端 websocket测试工具,支持ws wss客户端程序界面测试效果程序说明使用说明使用注意开发环境测试环境程序版本源文章出处下载 ...

html 判断页面支持canvas,HTML5 Canvas之测试浏览器是否支持Canvas的方法

html 判断页面支持canvas,HTML5 Canvas之测试浏览器是否支持Canvas的方法相关推荐

最新文章

热门文章