HTML5 canvas实现雪花飘落特效

1. //画雪花    function DrawSnow() {   
2.     ctx.fillStyle="white";        ctx.beginPath();   
3.     for (var i = 0; i < snow; i++) {            var p = arr[i];   
4.         ctx.moveTo(p.x,p.y);            ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);   
5.     }        ctx.fill();   
6.        ctx.closePath();   
7.   

然后调用 DrawSnow()函数，效果如下：

可以尝试多次刷新网页看是否会生成不同大小、位置的雪花（正常情况下是可以的），做到这里就已经接近最终效果了

注意：由于这里需要绘制100个圆，所以每当画一个圆时重新定义绘制开始坐标即：ctx.moveTo(p.x,p.y);否则会出现异样效果，不信可以试试呀

 5、雪花飘动

上面我们已经画出100个雪花，可惜只能依靠刷新网页才能看到变化效果，但是我们需要实现的是雪花不停的移动位置。

首先我们需要借助setInterval函数不停的重画雪花，这里间隔时间为50毫秒：setInterval(DrawSnow,50);

同时每一朵雪花的坐标（X、Y）需要不停的改变（在一定幅度内），我们这里的雪花是从左上方飘落到右下方，所以每朵X、Y坐标值都在不停的增大，那我们用一个函数SnowFall()定义雪花飘过规则

该函数代码如下：