HTML5 Canvas之测试浏览器是否支持Canvas的方法


Posted in HTML / CSS onJanuary 01, 2015

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Testing to See Whether the Browser Supports 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文件即可:

复制代码
代码如下:

<script src="modernizr-1.6.min.js"></script>

使用Modernizr测试Canvas的支持性,只需将上面的canvasSupport函数改动一下就可以了:
复制代码
代码如下:

function canvasSupport() {
return Modernizr.canvas;
}

我们认为,判断浏览器是否支持Canvas,使用Modernizr.js是最好的方案。
HTML / CSS 相关文章推荐
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 #HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 #HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 #HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 #HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
浅谈html5 响应式布局
Dec 24 #HTML / CSS
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python中的rjust()方法使用详解
2015/05/19 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python实现ATM系统
2020/02/17 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
django 多数据库及分库实现方式
2020/04/01 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
日语专业推荐信
2013/11/12 职场文书
社区工作者思想汇报
2014/01/13 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
高三语文教学反思
2016/02/16 职场文书