HTML5 Canvas粒子模拟效果

本文作者html5tricks，转载请注明出处

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。

html5-canvas-particle-effect

HTML代码：

<div id='container'></div>
<div class='info'>
  <hgroup class='about'>
    <h1>30,000 Particles</h1>
    <h2>A study creating performant particles with Canvas 2D</h2>
    <h3>Use your mouse</h3>
  </hgroup>
</div>

下面是粒子动画相关的JavaScript代码：

if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

		return window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

			window.setTimeout( callback, 1000 / 60 );

		};

	} )();

}

完整的代码请大家自己下载研究。

在线演示源码下载