canvas下雨动画

Html

Css

 html {
	width:100%;
}
body {
	width:100%;
	margin:0;
	padding:0;
	background-color:#000;
}
.rain {
	display:block;
}
embed {
	display:block;
}

var oCanvas = document.querySelector(".rain"); //获取元素rain
 var w, h; //定义变量w ,h
 var aRain = []; //用来存放新生成的雨滴

~~ function() { //自执行函数:不用调用自己执行 把canvas和整个屏幕无缝贴合
     window.onresize = arguments.callee; //随着浏览器的变化宽和高都变化
     w = window.innerWidth; //获取浏览器的宽
     h = window.innerHeight; //获取浏览器的高
     oCanvas.width = w; //把值赋给canvas
     oCanvas.height = h; //把值赋给canvas
 }();

function random(min, max) { //定义随机函数
     return Math.random() * (max - min) + min; //返回想要的任意的值
 }

var canCon = oCanvas.getContext("2d"); //创建一个2d画笔

Rain.prototype = { //this 指代当前函数
     init: function() { //雨滴的基本参数
         this.x = random(0, w); //雨滴横坐标
         this.y = 0; //纵坐标
         this.w = random(1.6, 3); //雨滴的 宽度 1.6px 到 2.5px
         this.h = random(8, 15); //雨滴的 长度8px 到 15px
         this.color = "#3ff"; //颜色
         this.vy = random(1.2, 2.3); //下降速度
         this.vr = random(0.5, 1.5); //绽放速度
         this.ground = random(0.8 * h, 0.9 * h); //雨滴绽放的位置
         this.r = this.w / 2; //圆的半径
     },
     draw: function() { //把基本参数变化成雨滴效果
         if (this.y < this.ground) //如果雨滴y坐标小于绽放位置,就一直下落
         {
             canCon.beginPath(); //抬笔
             canCon.fillStyle = this.color; //用画笔蘸颜色画雨滴
             canCon.fillRect(this.x, this.y, this.w, this.h); //画矩形区域左上角的坐标 矩形的宽 高
         } else //绽放的圆形区域
         {
             canCon.beginPath(); //抬笔 雨滴停止下落
             canCon.strokeStyle = "rgba(50,250,250,0.96)"; //空心画笔 rgba() rgb是颜色  a是透明度
             canCon.arc(this.x, this.y, this.r, 0, Math.PI * 2); //画圆形 圆心坐标 半径 画多少(弧度制)
             canCon.stroke(); //下笔作画
         }

},
     move: function() { //移动函数:设置怎么移动

if (this.y < this.ground) //如果雨滴的y坐标小于定义的地面高度  则雨滴往下移动
         {
             this.y += this.vy; //让每个雨滴下降速度不同
         } else //如果大于  就绽放
         {
             if (this.r < 100) //绽放半径
             {
                 this.r += this.vr; //让每个雨滴绽放速度不同
             } else {
                 this.init(); //循环雨滴:重新设置雨滴,重头再来 循环
             }

}

this.draw(); //调用draw函数
     }
 };

function Rain() {} //雨滴的模板
 //创建num个雨滴
 function createRain(num) { //参数为创建多少雨滴
     for (let i = 0; i < num; i++) //let 为立执行
     {
         setTimeout(function() { //创建num个雨滴的定时器
             var rain = new Rain(); //创建雨滴对象 创建什么样的雨滴 : 调用init函数 draw函数
             rain.init();
             rain.draw();
             aRain.push(rain); //把雨滴放在aRain里边, 目的是 循环他
         }, 200 * i); //时间200*i目的是为了让每个雨滴下落时间不同  单位为毫秒

}
 }

setInterval(function() { //下落运动的定时器
     canCon.fillStyle = "rgba(0,0,0,0.04)"; //遮盖层,透明度递减,让画的矩形看起来更像雨滴
     canCon.fillRect(0, 0, w, h); //画矩形
     for (var item of aRain) //遍历num个雨滴
     {
         item.move(); //把遍历后的雨滴都执行move函数 运动起来
     }
 }, 1000 / 90); //单位为毫秒

createRain(70); //方法入口  下多少雨滴

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas下雨动画



代码描述：canvas下雨动画

更新时间：2019-08-20 00:22:34

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

whitePure

相关代码

canvas下雨动画

最新