动画
DisplayObject与物理物体的同步处理好之后，我们便可以往它里面填充需要显示的图片，然后通过一定的时间间隔更换图片，即可达到动画的效果。通常，动画是由很多张图片组成的，为了减少读取次数，我们将动画中的所有的图片合成为一张大图，称为SpriteSheet。图3为《拯救PAPA》中1号工具的动画SpriteSheet：
广州网站建设,网站建设,广州网页设计,广州网站设计
然后，我们便可以在SpriteSheet中根据坐标获取当前帧所需要显示的图片：
- var canvas = document.createElement("canvas");
- canvas.width = width;/*width为所画图案的宽度*/
- canvas.height = height;/* height为所画图案的高度*/
- canvas.getContext('2d').drawImage(sheet, x, y, width, height, 0, 0, width, height);
总结
HTML5技术还在逐步自身完善当中，我们的程序员也正在不断的努力，创作更多的好作品。而本文所谈及的物理世界的构建，显示对象以及对动画播放等技术，对于我们制作HTML5的游戏中是非常有用的。我们期待看到HTML5技术的不断发展和更多创新的HTML5网页游戏。
广州网站建设,网站建设,广州网页设计,广州网站设计
欢迎大家来试玩NTFusion团队制作的HTML5物理游戏《拯救PAPA》!
原文链接：http://www.enjoyhtml5.com/2011/11/html5-game-with-box2djs/
