CIA - Canvas In Action 实战画布

我们虽然说画布很灵活,因为它是使用程序来绘画,相当于我们给了它灵魂。那它究竟能画出什么呢?一种回答可能是:什么都可能。下面给出一个示例,lightsaber-光剑。

oh,对了,还没打开:

这就是程序比静态图片要好地方之一:它是可交互的。就是说,我们可以控制这个光剑是开还是关。

http://jsfiddle.net/archcra/agtdu6ws/2/

当然还有其他人的:

这个还可以能量更高些:

http://jsfiddle.net/archcra/x5jrLa7x/embedded/result/

以上的示例虽然效果很好,但放在这里,实际上有些不合适。这是因为,这个例子不是使用Canvas制作的。之所以放在这里,是因为Canvas理论上能做到同样的效果。具体原因我们会在第四章第五节描述。那Canvas究竟能不能做到呢?我们可以看看下面的示例: 这是一个3维的示例,还有声音,可以用鼠标控制运动。它是使用了Canvas的,不过使用的不是二维Canvas,而是三维。而在本书的介绍范围内,仅限于二维。

游戏?当然。下面是个比较简单的射击游戏:

游戏的源码:http://jsfiddle.net/archcra/Lvkqj4up/

这个游戏的作者有很详细的说明:http://jlongster.com/Making-Sprite-based-Games-with-Canvas

本书第五章将会对这个游戏的制作,做一些简要的介绍。