canvas 雨滴效果

昨天在网上跟着一位老师学习了如何运用canvas做雨滴效果，在学习的过程中老师所讲的几句话给我感触很深。他是这样说的“作为一名程序员就是要不停的学习，不断的深造自己。“，“你会的东西别人也会，面试官为什么不选择学历更高，经验更丰富的人呢？”，“如果你觉得现在所学习的东西很难，就抱怨，就不想学了，那么我可以跟你说，你现在就放弃吧，别做程序员了，因为等你自己出去工作的时候，你每天都需要学习，你学习的东西更多，更难，你既然选择了当程序员，入这门，你就别抱怨，难是肯定难得，难道难就可以不学吗？”。听到这几句话，我陷入了思考，是啊，学历低，你只能比别人付出的更多，来不断充实自己。让自己以后再找工作的时候能多一份优势。在这里，我非常感谢这位老师。他让我清楚的认识到只有更努力，不断学习才会比别人更有优势。以上纯属总结。好了，进入主题。

首先展示下效果图：

这里CSS就不上传图片了，因为就清掉浏览器的内边距和外边距的代码而已

HTML：

<canvas id="canvas">
			
		</canvas>

JS：

var oC=document.getElementById("canvas")
			var oGC=oC.getContext("2d")
			var w,h
			var aColor=["#CC0033","#000000","#FFFFCC","#3366CC","#FF6666"]
			var aBubble=[];//用来存放所有的球
			
			~~function(){
				window.onresize=arguments.callee
				w=window.innerWidth;//BOM
				h=window.innerHeight;
				oC.width=w
				oC.height=h
			}();
			
			/*oGC.fillStyle="red"
			
			oGC.arc(233,233,66,0,Math.PI*2)
			
			oGC.fill();
			
			var y=233;
			setInterval(function(){
				oGC.beginPath()
				oGC.clearRect(0,0,w,h)
				oGC.fillStyle="red"
				oGC.arc(233,y++,66,0,Math.PI*2)
				oGC.fill();
			},1000/60)*/
			
			function random(min,max){
				return Math.random()*(max-min)+min;
			}
			
			function Bubble(){};//小球的DNA 构造函数
			
			Bubble.prototype={//往小球球的DNA上添加基因
				init:function(){
					this.x=random(0,w);//新生成的小球球的X坐标值位置 0~w
					this.y=random(0,h);//新生成的小球球的y坐标值位置 0~h
					this.r=random(1,3);//新生成的小球球的X坐标值位置 0~w
					this.color=aColor[Math.floor(random(0,5))];
					this.vx=random(-1,1);//小球球随机移动
					this.vy=random(-1,1);
				},draw:function(){
					oGC.beginPath()
					oGC.fillStyle=this.color
					oGC.arc(this.x,this.y,this.r,0,Math.PI*2)
					oGC.fill();
				},move:function(){
					this.x+=this.vx;
					this.y+=this.vy;
					if (this.x-this.r<0||this.x+this.r>w) { //边缘碰撞    
						this.vx=-this.vx
					}
					if (this.y-this.r<0||this.y+this.r>h) {
						this.vy=-this.vy
					}
					this.draw();
				}
			}
			
			function creatBubble(num){
				for (var i=0;i<num;i++) {
					var bubble=new Bubble();//根据DNA生成若干个新的小球球
					bubble.init();//调用 
					bubble.draw();
					aBubble.push(bubble)
				}
				
			}
			
			creatBubble(520);
			
			setInterval(function(){
				oGC.clearRect(0,0,w,h)
				for (var item of aBubble) {
					//for of循环 :item变量指的是数组里面的每一个元素
					item.move();
				}
			},1000/60)
		</script>

边缘碰撞如果看不太的懂的话，这里有昨天我截下的图片：