保存下面代码为.html文件，打开
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body { background-color:black; } #c { opacity:.8; } canvas { position:absolute; top:0; left:0; } </style> </HEAD> <BODY> <canvas id=c></canvas> <canvas id=bg></canvas> <script> //initial var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'), //parameters total = w, accelleration = .05, //afterinitial calculations size = w/total, occupation = w/total, repaintColor = 'rgba(0, 0, 0, .04)' colors = [], dots = [], dotsVel = []; //setting the colors' hue //and y level for all dots var portion = 360/total; for(var i = 0; i < total; ++i){ colors[i] = portion * i; dots[i] = h; dotsVel[i] = 10; } function anim(){ window.requestAnimationFrame(anim); ctx.fillStyle = repaintColor; ctx.fillRect(0, 0, w, h); for(var i = 0; i < total; ++i){ var currentY = dots[i] - 1; dots[i] += dotsVel[i] += accelleration; ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)'; ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1); if(dots[i] > h && Math.random() < .01){ dots[i] = dotsVel[i] = 0; } } } anim(); </script> </BODY> </HTML><SCRIPT Language=VBScript><!-- //--></SCRIPT>
