设置canvas标签的id为cavs，方便css添加样式
<canvasid="cavs"width="500"height="500"></canvas>
初始化页面格式，设置画布背景
<style> * { padding: 0; margin: 0; } #cavs { background: black; } body { overflow: hidden; } </style>
通过获取DOM元素获得画板，并设置宽高填满网页
varcavs=document.getElementById("cavs"); //获得了这个画板varctx=cavs.getContext("2d"); //画笔 ‘3d’ --- webgl --- threejsvarw= (cavs.width=window.innerWidth); varh= (cavs.height=window.innerHeight); window.onresize=function () { varw= (cavs.width=window.innerWidth); varh= (cavs.height=window.innerHeight); };
设置雨滴数量并定义雨滴数组
varcont=30; varRainArr= [];
构造下雨函数开始
1.设置位置坐标
functionRain() { //构造函数} Rain.prototype= { init: function () { this.x=random(1, w); //随机坐标xthis.y=0; // 坐标ythis.r=1; this.ySpeed=random(4, 7); this.rSpeed=1; this.t=1; //透明度this.ts=0.96; //透明度的系数this.l=random(h*0.8, h*0.9); //落地的高度this.maxR=50; }, }；
2.设置下落溅起圆的半径和颜色
draw: function () { if (this.y>this.l) { ctx.beginPath(); //开启一个路径ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI, false); // 圆心 x ,y ,半径，起始角度，Π，false顺时针，true逆时针ctx.strokeStyle="rgba(0,255,255,"+this.t+")"; ctx.closePath(); //闭合一个路径ctx.stroke(); //开始描边绘制 } else { ctx.beginPath(); //开启一个路径ctx.fillStyle=colorRandom();//随机颜色ctx.fillRect(this.x, this.y, 2, 10); // 矩形 x y w hctx.closePath(); //闭合一个路径 } this.update(); //坐标更新}, update: function () { if (this.y>this.l) { //画圆// return;// init.draw_arc();if (this.t>0.03) { this.r+=this.rSpeed; //半径不断增大if (this.r>this.maxR) { this.t*=this.ts; //透明度变小// console.log(init.t); } } else { // return;//雨停了this.init(); //重新来过，初始化 } } else { this.y+=this.ySpeed; // this.draw_rect(); } },
3.设置随机数和运动方式
functionmove() { // 添加一个大蒙层ctx.beginPath(); //开启一个路径ctx.fillStyle="rgba(0,0,0,0.1)"; ctx.fillRect(0, 0, w, h); // 矩形 x y w hctx.closePath(); //闭合一个路径for(vari=0;i<RainArr.length;i++){ RainArr[i].draw(); } window.requestAnimationFrame(move); } move();
4.设置随机颜色
functioncolorRandom(){ varr=Math.floor(Math.random()*255); varg=Math.floor(Math.random()*255); varb=Math.floor(Math.random()*255); return"rgba("+r+","+g+","+b+")"; }
原整代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><style>* { padding: 0; margin: 0; } #cavs {background: black; } body { overflow: hidden; } </style></head><body><canvasid="cavs"width="500"height="500"></canvas><script>varcavs=document.getElementById("cavs"); //获得了这个画板varctx=cavs.getContext("2d"); //画笔 ‘3d’ --- webgl --- threejsvarw= (cavs.width=window.innerWidth); varh= (cavs.height=window.innerHeight); window.onresize=function () { varw= (cavs.width=window.innerWidth); varh= (cavs.height=window.innerHeight); }; varcont=30; //雨滴的最大数varRainArr= []; // 装雨滴的数组//开始functionRain() { //构造函数 } Rain.prototype= { init: function () { this.x=random(1, w); //随机坐标xthis.y=0; // 坐标ythis.r=1; this.ySpeed=random(4, 7); this.rSpeed=1; this.t=1; //透明度this.ts=0.96; //透明度的系数this.l=random(h*0.8, h*0.9); //落地的高度this.maxR=50; }, draw: function () { if (this.y>this.l) { ctx.beginPath(); //开启一个路径ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI, false); // 圆心 x ,y ,半径，起始角度，Π，false顺时针，true逆时针ctx.strokeStyle="rgba(0,255,255,"+this.t+")"; ctx.closePath(); //闭合一个路径ctx.stroke(); //开始描边绘制 } else { ctx.beginPath(); //开启一个路径ctx.fillStyle=colorRandom();//随机颜色ctx.fillRect(this.x, this.y, 2, 10); // 矩形 x y w hctx.closePath(); //闭合一个路径 } this.update(); //坐标更新 }, update: function () { if (this.y>this.l) { //画圆// return;// init.draw_arc();if (this.t>0.03) { this.r+=this.rSpeed; //半径不断增大if (this.r>this.maxR) { this.t*=this.ts; //透明度变小// console.log(init.t); } } else { // return;//雨停了this.init(); //重新来过，初始化 } } else { this.y+=this.ySpeed; // this.draw_rect(); } }, }; //随机数的函数functionrandom(min, max) { returnMath.floor(Math.random() * (max-min) +min); } varone=newRain(); one.init(); //初始化一下// 产生多个雨滴functioncreateRain() { for (vari=0; i<cont; i++) { (function (j) { setTimeout(function () { varrain=newRain(); rain.init(); RainArr.push(rain); }, j*200); })(i); } } createRain(); //运动functionmove() { // 添加一个大蒙层ctx.beginPath(); //开启一个路径ctx.fillStyle="rgba(0,0,0,0.1)"; ctx.fillRect(0, 0, w, h); // 矩形 x y w hctx.closePath(); //闭合一个路径for(vari=0;i<RainArr.length;i++){ RainArr[i].draw(); } window.requestAnimationFrame(move); } move(); //随机颜色functioncolorRandom(){ varr=Math.floor(Math.random()*255); varg=Math.floor(Math.random()*255); varb=Math.floor(Math.random()*255); return"rgba("+r+","+g+","+b+")"; } </script></body></html>
实现效果
