Rain is a very common but good-to-see animation. In this recipe, the droplets are small lines.
The output looks like this:
The recipe is as follows:
The HTML code:
<html> <head> <title>The Rain</title> <script src="rain.js"></script> </head> <body onload="init();"> <center> <canvas id="MyCanvasArea" width="800" height="500" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>Rain</h1> </center> </body> </html>
var can; var ctx; var raindrops=[]; var raindrop; var part; var numraindrops=50; var i; var bounce=-1; var r,g,b; function animate() { reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ; clear(); draw(); update(); reqAnimFrame...