HTML5 Canvas: 测试浏览器是否支持Canvas

标签: html5 canvas 测试 | 发表时间:2013-05-27 23:30 | 作者:enzymer
出处:http://blog.csdn.net

原文:

http://www.lifelaf.com/blog/?p=342

本文翻译自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是最好的方案。


作者:enzymer 发表于2013-5-27 23:30:36 原文链接
阅读:92 评论:0 查看评论

相关 [html5 canvas 测试] 推荐:

HTML5 Canvas: 测试浏览器是否支持Canvas

- - CSDN博客Web前端推荐文章
本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说,如果上下文不存在的话,Canvas也就名存实亡了. 测试浏览器是否支持Canvas有好几种方法.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下. 与matlab处理图像类似的是,这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像,(0,0)表示图像的左上角位与canvas画布的位置.

备份:html5 canvas cheat sheet

- - 膘叔
纯备份资料,HTML5的canvas资料.

HTML5 Canvas双缓存实例

- - Web前端 - ITeye博客
转自:http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术:获取到页面中的Canvas对象之后,创建了一个与页面Canvas同样大小的Canvas对象.

HTML5 Canvas开发框架:CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能,但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制,你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

25 超棒的 HTML5 Canvas 游戏

- 迎客松 - LinuxEden开源社区-Linux伊甸园
Canvas 元素作为HTML5标准的一部分,允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端,使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.

HTML5 Canvas(画布)教程 – 图像处理

- - Web前端 - ITeye博客
Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中. 在此之前,人们要想实现动态的网页应用,只能借助于第三方的 插件,比如Flash或Java,而引入了Canvas标记后,人们直接打通了通往神奇的动态应用网页的大门. 本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理.

html5 canvas 详细使用教程

- - CSDN博客Web前端推荐文章
图形变形(平移、旋转、缩放). 矩阵变换(图形变形的机制). 绘制图像(图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]). 保存和恢复状态(context). 结合setInterval制作动画.      是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验.

走进 HTML5:20个惊艳的 HTML5 Canvas 应用试验

- - 博客园_梦想天空
如今,HTML5 可谓如众星捧月一般,受到众多业内巨头的青睐. 很多 Web 开发者也尝试着用. HTML5 来制作各种 Web 应用. HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过. JavaScript 绘制图形的方法,非常强大.