HTML5中的Canvas（介绍）

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

什么是Canvas

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

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

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

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

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

然后是实际使用Canvas的结果，一般来说现代人使用的浏览器都能显示，具体而言，如果你的浏览器是Internet Explorer 6、Firefox 1.5、Opera 9、Safari 1.3、Chrome 1.0以上，应该就可以看到。

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的替代技术出现的，我们要理解各种技术的特点，然后在特定的场合选择最合适的方法。