HTML5中的Canvas(介绍)

By | 2011/06/24

这部分说明Canvas是什么,然后Canvas又能做哪些事情。

什么是Canvas

Canvas是在浏览器上绘图的一种机制。

传统的网页,总是使用GIF或者JPEG来显示图像,这种图形是需要事先画好,“静态”的图像;随着各种要求的发展,使用Flash或Java的“动态”图像也出现了。

而Canvas,则是不使用Flash和Java,而是用Javascript的一种绘图手段。

我们实际的看一个例子,这是网上随便找的一个韩国网游排行榜的例子(很想找中国的,但是没有找到具有权威性的,有的排行榜首位都是些没听过的游戏……),使用Canvas绘制的饼图。

canvas-sample

上图是你应该能看到东西,当然上面只是一张图片,只要你的浏览器能显示图片就能看到了。

然后是实际使用Canvas的结果,一般来说现代人使用的浏览器都能显示,具体而言,如果你的浏览器是Internet Explorer 6、Firefox 1.5、Opera 9、Safari 1.3、Chrome 1.0以上,应该就可以看到。
Wordpress不认识Canvas标签,只好把例子写到另外的页面里,请点击查看。不要以为也是一副图片,用鼠标你是可以选中文字的。如果你只是看到一个白白的框子,问题大了~

Canvas的发源

Canvas最初是由Applet发祥而来,最早从Mac OS上有了Dashboard,Apple、Mozilla、Opera共同成立了WHATWG,并制定Web Applications规则。这个规则就是HTML5的蓝本。

Internet Explorer的状况

微软并没有参加WHATWG,所以Internet Explorer虽然是占有率最高的浏览器,却不支持Canvas(准确的说是IE9之前的浏览器不支持,微软经不起大家的威逼利诱,终于在IE9中加入了Canvas支持。即便强悍至微软,还是无法阻碍历史前进的车轮啊),这样给Canvas的广泛应用带来了极大的障碍。

但是等等~ 刚刚的那个例子,你不是说IE6以上也能看么?哦,是的,不过如果你使用IE对比一下图片的话(图片是我在Chrome上截的),可能会发现阴影挥有点生硬等问题。感谢Google大神,贡献了ExplorerCanvas这么一个伟大的项目,ExplorerCanvas利用Javascript在IE上模拟出了Canvas的功能,尽管并不完美,但是只要不使用太过精深的Canvas语法,基本和原生Canvas没有太大的区别。这样一来,只要给IE用户调用一下excanvas.js,就能在所有主流浏览器上放心的使用Canvas了。

Canvas的更多实例

你可以在Mozilla的网站里找到一些例子,有些还是挺有趣的。这里面的A Basic RayCaster有着CS的潜质;然后再看看这个,Canvascape – “3D Walker”,基本有CS的雏形了。你可以使用方向键移动,空调跳跃,甚至还可以射击,只是没有敌人……还不过瘾,试试HTML5的扫雷吧,经典的极致诠释啊!什么,这都无法满足你那欲求不满——哦不,孜孜不倦的上进心?好吧,这个杀手级的HTML5版植物大战僵尸出手了……

Canvas可以做的和不能做的

Canvas专注于线条、图像和色彩,本身并不可以做动画。如果需要实现动画,就需要使用Javascript一帧一帧的绘制。

另外,在一开始HTML5的标准里,Canvas是不支持写字的,最开始的时候,如果要写入文字的话,只能使用DOM创建一些文本对象(比如含有文字的DIV等),然后在指定这些文本对象的坐标。上面的例子就是使用DIV写字的(阴影也是,真是麻烦啊),说实话这一点让我感到亚历山大。不过现在浏览器基本也加入了文字API了,有机会也要说明一下。

以上的总结我们可以看到,Canvas并不是一种万金油的技术,恐怕也很难取代Flash,在使用复杂的图像或动画的时候,还远远不是Flash的对手。不过Canvas不是作为Flash的替代技术出现的,我们要理解各种技术的特点,然后在特定的场合选择最合适的方法。

下一次讲解HTML5中的Canvas(使用)

发表评论

您的电子邮箱地址不会被公开。