canvas粒子雪花效果

	
		
   
   
		
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
	
	
		
   
   
    
    your brower does not support the canvas elelment
   
   
		
		
		<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");

		var particles = []; /*粒子创建一个数组*/
		for(var i = 0; i < 500; i++) {
			particles.push({ //设置雪花的初始x,y位置,x,y方向上的速度,以及雪花的大小,颜色
				x: Math.random() * window.innerWidth,
				y: Math.random() * window.innerHeight,
				vx: (Math.random() * 1 - .5),
				vy: (Math.random() * 1 + .5),
				size: 1 + Math.random() * 2,
				/*color: '#fff'*/
				color:'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6)/*随机颜色*/
			});
		}

		function timeUpdata(e) {
			context.clearRect(0, 0, window.innerWidth, window.innerHeight); /*清除画布区域*/
			var particle;
			for(var i = 0; i < 500; i++) {
				particle = particles[i];
				particle.x += particle.vx;
				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(timeUpdata, 40);
	</script>