canvas 雨滴效果

昨天在网上跟着一位老师学习了如何运用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>

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

canvas 雨滴效果相关推荐

html5 雨滴效果,html5 canvas下雨滴掉落动画特效
特效描述:html5 canvas 雨滴掉落动画动画特效.html5 canvas绘制下雨场景动画.雨滴动画. 代码结构 1. 引入JS 2. HTML代码 // TO DO // Remove r ...
纯JS制作的窗户雨滴效果
今天本站推荐的代码是用JS制作的窗户雨滴效果,绚丽的效果不亚于FLASH,由于不知出处在哪,总而言之, 在此感谢作者的慷慨分享. function demo() { var engine = new ...
使用rainyday.js插件制作雨滴效果
插件介绍 rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件.该雨滴效果插件的特点是使用简单,易于集成.Rainyday.js是一个使用HTML5特性的纯 ...
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气. 感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换. 实现一个小雨滴首先雨滴是一个个小的椭圆 ...
教你实现一个朴实的Canvas时钟效果
摘要:今天教大家写一个canvas的时钟案例,效果可能看起来比较简单,没有那些花里胡哨的. 本文分享自华为云社区<如何实现一个朴实无华的Canvas时钟效果>,作者: 北极光之夜.. 一. ...
canvas下雪效果(原生js)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果
css实现窗户上水珠效果,效果特别逼真,窗外的雨淅淅沥沥飘打在玻璃上,看起来很像模糊的窗外,斜滴的雨露,接下来给大家一起来用CSS技术实现这样一幅画面,下面这里仅是用CSS技术来演示这样的一个场景, ...
css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果.pdf
纯纯css实实现现窗窗户户玻玻璃璃雨雨滴滴逼逼真真效效果果这里仅是用CSS技术来演示这样的一个场景,可并不太实用.然而这是一个探索CSS新功的最佳机会.可以让你尝试使用一些新特性和新工具.并且 ...

canvas 雨滴效果

canvas 雨滴效果相关推荐

最新文章

热门文章