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阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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
php输出xml必须header的解决方法
2014/10/17 PHP
php实现读取内存顺序号
2015/03/29 PHP
yii添删改查实例
2015/11/16 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python中比较两个列表的实例方法
2019/07/04 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
如何理解python面向对象编程
2020/06/01 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
小学生获奖感言范文
2014/02/02 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
工程部岗位职责范本
2015/04/11 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL