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

首先展示下效果图：

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

HTML：

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

JS：

var oC=document.getElementById("canvas")var oGC=oC.getContext("2d")var w,hvar aColor=["#CC0033","#000000","#FFFFCC","#3366CC","#FF6666"]var aBubble=[];//用来存放所有的球~~function(){window.onresize=arguments.calleew=window.innerWidth;//BOMh=window.innerHeight;oC.width=woC.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~wthis.y=random(0,h);//新生成的小球球的y坐标值位置 0~hthis.r=random(1,3);//新生成的小球球的X坐标值位置 0~wthis.color=aColor[Math.floor(random(0,5))];this.vx=random(-1,1);//小球球随机移动this.vy=random(-1,1);},draw:function(){oGC.beginPath()oGC.fillStyle=this.coloroGC.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>

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