110行JavaScript代码实现的雪花纷飞动画效果

Snow

</div><div data-lake-id="1cf236ae4bf7f0d6d1d04b604168eccf">/* comment out - could also work</div><div data-lake-id="e687e52e96bd78cb40999a7a1ccfea1e">* {margin: 0; padding: 0;}</div><div data-lake-id="24abf6a1d76124fe473bf6ab4c1159e8">*/</div><div data-lake-id="8651408303ec820a64d8c65b5c9d2af5">body {</div><div data-lake-id="76c06b1fea25c1a50c2f695538d8cb5a">    /*You can use any kind of background here.*/</div><div data-lake-id="dbbb373a8ee80f375a571da97f672a59">    background: #6b92b9;</div><div data-lake-id="4ecbffae603a38086a980c8015a52f65">}</div><div data-lake-id="e36204e9820d3327965f1a2bb805f957">canvas {</div><div data-lake-id="c6b74c6ea79d3501c494af9dda6d4fe2">    /* could also work */</div><div data-lake-id="359e46f634d573e712e37b1642a9cdae">    /*display: block;*/</div><div data-lake-id="ec82deb452b636ab7d6d08b7741f3114">}</div><div data-lake-id="b6d6c4be3913da84cf3180309fed1076">

</div><div data-lake-id="3f3139ead5c5b32e469191fff84b9cb8">window.onload = function(){</div><div data-lake-id="b90ce072a68c3ddaa0e1bdc8f22fb428">    //canvas init</div><div data-lake-id="2a8a721bbe37efa0a3b0547854e6773b">    var canvas = document.getElementById("canvas");</div><div data-lake-id="876d8d57c74c50646d1dc0be67b716e4">    var ctx = canvas.getContext("2d");</div><div data-lake-id="c9c48e0308a120865689d5c224325f21">   </div><div data-lake-id="cc0af9f3512d16ec110ae171eb2e9e86">    //canvas dimensions</div><div data-lake-id="c43e59a5cdfb2d5fca3fe9e64ccd1224">    var W = window.innerWidth;</div><div data-lake-id="23df67f0c9f4b165f23e756912fb315b">    var H = window.innerHeight;</div><div data-lake-id="9fa26aa45c2d9c2933c3bd1f71b5b884">    canvas.width = W;</div><div data-lake-id="b73126ead8bccf858eebb52e480b83f9">    canvas.height = H;</div><div data-lake-id="f77b9f310ab2698ca0143296dc96a4ca">   </div><div data-lake-id="e81766f501c57bc78d74afdfabd116a4">    //snowflake particles number  </div><div data-lake-id="7cae52d865b07f9b2f2fac3397641877">    var mp = 3000; //max particles</div><div data-lake-id="0c17a2089735266151da80661f95eea2">    var particles = [];</div><div data-lake-id="ea4f254bff2d4ff67cb987b137afe22f">    for(var i = 0; i < mp; i++)</div><div data-lake-id="c4a763a7c8ab01ac4e657ba87c3823f1">    {</div><div data-lake-id="89e8c76fb4c2d338937e0b0195efdfa1">        particles.push({</div><div data-lake-id="74bec0785fe73679d976dfcf02a1ef37">            x: Math.random()*W, //x-coordinate</div><div data-lake-id="f60198995abbf0fc5f2088fbc1c89cf0">            y: Math.random()*H, //y-coordinate</div><div data-lake-id="7ec26264b259fb7b9bd6bfd710d4aeff">            r: Math.random()*3+1, //radius</div><div data-lake-id="2a13d1da8bb816d8698c92edcfb75e5f">            d: Math.random()*mp //density</div><div data-lake-id="e14e4396e9c79660cc405ce64e6612aa">        })</div><div data-lake-id="04facd8b271288cbe0f556ef3ff84274">    }</div><div data-lake-id="73fd173de6c32c464ddb9ecbf88b5c7c">   </div><div data-lake-id="5f891299761ddb3c24b298ab6c1775a1">    //Lets draw the flakes</div><div data-lake-id="0e91ba6c8d34f7c0a77743faa8222023">    function draw()</div><div data-lake-id="7f4c112d600c53977f5d1501540d282d">    {</div><div data-lake-id="569fd92606d5f17c92dfff074fd613b3">        ctx.clearRect(0, 0, W, H);</div><div data-lake-id="a34fb591a4bf142550451a9b5be62f4a">       </div><div data-lake-id="321dda2452b99dd23dc2d2038d896f73">       ctx.fillStyle = "rgba(255, 255, 255, 0.8)";</div><div data-lake-id="e776070e3c3c382a9ad4696dc9d6ca79">       /* ctx.fillStyle = "#FF0000";*/</div><div data-lake-id="fcaff67ba19f6c925aff4a09bd0faa1a">        ctx.beginPath();</div><div data-lake-id="3516f8895cd81217872134c3c98c06c4">        for(var i = 0; i < mp; i++)</div><div data-lake-id="c24b3ec9ebd55254f43814d70a1488c4">        {</div><div data-lake-id="3cf8013d90a46e5f0426d5f54fb91e97">            var p = particles[i];</div><div data-lake-id="056245052e90f7820bf833a0b29eba24">            ctx.moveTo(p.x, p.y);</div><div data-lake-id="c6774bf78fe9c6368a783f48d83ca4ef">            ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);</div><div data-lake-id="7aa6bebb4c9e85e6fdbdbaaa6e3d0857">        }</div><div data-lake-id="cac5eacfcb93acf066f2f4c04c988d56">        ctx.fill();</div><div data-lake-id="4a14b5c898a847da74bdb2127ac4d90b">        update();</div><div data-lake-id="ed5b7b33cdd0014f4175ca46635c95a6">    }</div><div data-lake-id="9bdd4bf9c5914df0cb5c69b17617760c">   </div><div data-lake-id="98c510ec17be707b4e7981d5f41b329b">    //Function to move the snowflakes</div><div data-lake-id="5a04474cbe5219662098101b40a560ad">    //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes</div><div data-lake-id="6d634812e67da7e16d28c8a3a05748eb">    var angle = 0;</div><div data-lake-id="d34a4013a72fcc15e91f64cb67a5bc5e">    function update()</div><div data-lake-id="413a38ddbeb81536fc35126d163f726f">    {</div><div data-lake-id="a4d477456491acb8c217503728695288">        angle += 0.01;</div><div data-lake-id="6768f6fe48f69bb8ea038e4a01665933">        for(var i = 0; i < mp; i++)</div><div data-lake-id="2c60ea34fcda3ac654f2d8c5eb3a0ab7">        {</div><div data-lake-id="39661a30e65de4b4f462c718e1024ce7">            var p = particles[i];</div><div data-lake-id="d32ae5db2e0b7e95169677115aecbf9c">            //Updating X and Y coordinates</div><div data-lake-id="f84bd5172aa533d10e159d7429202941">            //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards</div><div data-lake-id="ec22fde6532760dc5e91fd8945d2cd3f">            //Every particle has its own density which can be used to make the downward movement different for each flake</div><div data-lake-id="2d14ce68dd09baae4d73089c67484c80">            //Lets make it more random by adding in the radius</div><div data-lake-id="99290a592b2d53e21d6eaa53c031df25">            p.y += Math.cos(angle+p.d) + 1 + p.r/2;</div><div data-lake-id="9f419fdddb263017848bae0a8080eef7">            p.x += Math.sin(angle) * 2;</div><div data-lake-id="fcde5810b0bd635e628db6c11ecd4871">           </div><div data-lake-id="2299f300ff18599ea2bedd230c3cc565">            //Sending flakes back from the top when it exits</div><div data-lake-id="048e83de2c9c6898dfb0cb4e5fa0cdb2">            //Lets make it a bit more organic and let flakes enter from the left and right also.</div><div data-lake-id="f0415a35d5372495d90e84bbeb318c90">            if(p.x > W || p.x < 0 || p.y > H)</div><div data-lake-id="e8f4b078b45f8bd8daded4d2ea1dd202">            {</div><div data-lake-id="a392a68c542410ed1c9de053bd841ac1">                if(i%3 > 0) //66.67% of the flakes</div><div data-lake-id="b1da279553adcfa16c9824cd010bef28">                {</div><div data-lake-id="6a200898ed44e6f18e1fb82d5a55d34f">                    particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};</div><div data-lake-id="ffb1ad426febc68309d0b79ad2c30312">                }</div><div data-lake-id="df89c504a9dfe83b14a4deb772af8bf5">                else</div><div data-lake-id="05eb07a74a20de3d38c6ed36763dda84">                {</div><div data-lake-id="ad0ced96a3d39654fdcfcdf3a52e618b">                    //If the flake is exitting from the right</div><div data-lake-id="a6d35ca4d19244a7a5d0020b640f0783">                    if(Math.sin(angle) > 0)</div><div data-lake-id="0c549df90387b0e06bb6480b88f1cb86">                    {</div><div data-lake-id="2fc1a16ea998eab1087f7ab1850b0a64">                        //Enter fromth</div><div data-lake-id="eebc96026a6db00dd40c683b85596d9e">                        particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};</div><div data-lake-id="416f1bf1f35c38ea902eee43f0053a51">                    }</div><div data-lake-id="fcef3affabdd00b3212afc1d3d77603c">                    else</div><div data-lake-id="93017c6bb0c6b79e85bda0b8095e6478">                    {</div><div data-lake-id="948de026c6fabb47d0462a78be088aad">                        //Enter from the right</div><div data-lake-id="69812a873b2f52e75626296a69d0143d">                        particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};</div><div data-lake-id="65ce1b7778d5243f00c2facdcf996d69">                    }</div><div data-lake-id="307ec189547ee0e9c0b3cff98ed2442b">                }</div><div data-lake-id="4fd1400cea00dff9a334c4a722d84464">            }</div><div data-lake-id="144ac49c6540a38779d33150783bfc33">        }</div><div data-lake-id="02200bf7a7d2911be8d23b2b80741522">    }</div><div data-lake-id="889caf3936ae899bd1518713dfd3a102">   </div><div data-lake-id="4cd228cc4ecdb21b350ab5e9c3a17cfb">    //animation loop</div><div data-lake-id="85dca2a17ae5475bc6411ec99acd67bd">    setInterval(draw, 50);</div><div data-lake-id="b5cdfe1f1635662099a8b6e3ad53604f">}</div><div data-lake-id="bfd7c91a7205323282207dd1c338f724">

110行JavaScript代码实现的雪花纷飞动画效果110行JavaScript代码实现的雪花纷飞动画效果110行JavaScript代码实现的雪花纷飞动画效果110行JavaScript代码实现的雪花纷飞动画效果

上一篇:进程、线程和上下文切换


下一篇:在Silverlight中嵌入HTML或aspx页面