Canvas画雪花图~

<canvas id="myCanvas">你的浏览器不支持canvascanvas>

额….记得给body设置个颜色，你才能看到效果，还有给canvas画布设置一个大小。

var canvas=document.querySelector("#myCanvas");
snow(canvas);
//canvas这个参数是获取的dom元素，
function snow(canvas){
    var context=canvas.getContext('2d');
    //微粒子创建数组
    var particles=[];
    for(var j=0;j<500;j++){
        particles.push({//设置雪花的初始位x，y  x,y向上的速度，以及雪花的大小颜色，随机生成的
            x:Math.random()*window.innerWidth,
            y:Math.random()*window.innerHeight,
            vx:Math.random()*1-0.5,
            vy:Math.random()*1+0.5,
            size:1+Math.random()*2,
            color:'#fff'
        })
    }
    //进行绘制
    function timeUp(){
        context.clearRect(0,0,window.innerWidth,window.innerHeight);
        //清除画布
        var particle;
        for(var i=0;i<500;i++){//遍历所有的雪花
            particle=particles[i];
            particle.x+=particle.vx;//更新雪花的新的x,y位置
            particle.y+=particle.vy;
            if(particle.x<0){
                particle.x=window.innerWidth;//如果雪花的位置放在了左侧意外，然后使其显示在窗口右边
            }
            if(particle.x>window.innerWidth){
                particle.x=0;
            }
            if(particle.y>=window.innerHeight){
                particle.y=0;
            }
            //设置雪花颜色
            context.fillStyle=particle.color;
            context.beginPath();//开始绘制雪花
            context.arc(particle.x,particle.y,particle.size,0,Math.PI*2);//绘制圆形
            context.closePath();//必和路径
            context.fill();
        }
    }
    setInterval(timeUp,40);
}

其实也不难，500是控制雪花数量的，然后在生成雪花的位置，把它保存在一个数组里面，每次绘制之前要先把画布清除，不然原来越多，然后开始一个一个点绘制，这里有一个范围判断，就是在窗口左右的判断。
e….感觉也没什么难的…有问题再问我吧~~~~