HTML5 Canvas实现粒子模拟效果【小知识分享】

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

在线演示    源码下载： 链接：http://pan.baidu.com/s/1o6BTiLs 密码：zo1b

HTML代码：
[mw_shl_code=html,true]<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>[/mw_shl_code]


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

[mw_shl_code=javascript,true]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 );

                };

        } )();

}[/mw_shl_code]

蛮有意思的