之前在石川县烟花大会的那篇文章中提到过使用js制作出烟花效果,那篇文章中是使用图片的切换来实现的。网速不够快的话效果会非常不给力。而在html5中,可以使用canvas可以进行绘图,所有的效果都不用下载,在客户端就可以实现,所以就不会受到网速的影响了。 那么,如何使用js制作动画呢?以前的话,可以使用setInterval这个函数去实现,现在又出现一个requestAnimationFrame,据说流畅性比setInterval好一些。 canvas的几个绘图的方法可以从这里查看。而requestAnimationFrame这个函数,因为不同的浏览器对象名称不一样,需要考虑一下浏览器兼容性的问题。下面的这段代码就可以保证大部分的浏览器的兼容,可以如果不兼容requestAnimationFrame的话就会选择setTimeout来实现同样的功能。 requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); };