<html>
<head>
<script type="text/javascript">
function rain() {
var canvas = document.getElementById( "sky" );
var context = canvas.getContext( "2d" );
var canvas_width = canvas.width;
var canvas_height = canvas.height;
var rain_start_interval_y = 100;
var rain_size = 8;
function ClassRain(){
this.size = rain_size * Math.random();
this.pos_x = canvas_width * Math.random();
this.pos_y = rain_start_interval_y * Math.random();
this.dy = 10 * Math.random();
}
function beginRain() {
context.fillStyle = "rgba(236, 240, 241, 0.65)";
context.fillRect( 0, 0, canvas_width, canvas_height );
context.fillStyle = "#95a5a6";
for( var i = 0; i < rains.length; ++i ){
var item = rains[i];
context.fillRect( item.pos_x, item.pos_y, item.size, item.size );
item.pos_y += item.dy;
if( item.pos_y > canvas_height ){
item.pos_y = -10;
}
}
}
var rains = [];
for( var i = 0; i < 100; ++i ){
rains.push( new ClassRain() );
}
setInterval( beginRain, 25 )
}
</script>
</head>
<body onload="rain()">
<canvas id="sky" width="800" height="400"></canvas>
</body>
</html>原文：http://blog.csdn.net/pandora_madara/article/details/38091625