-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (91 loc) · 3.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>雨滴效果</title>
<style type="text/css">
body{margin:0;padding:0;}
canvas{display:block;background-color: #000000;}
</style>
</head>
<body>
<canvas class="rain"></canvas>
<script type="text/javascript">
//获取canvas元素
var canvas=document.querySelector(".rain");
//获取浏览器的宽和高
var w=window.innerWidth;
var h=window.innerHeight;
canvas.width=w;
canvas.height=h;
//当浏览器器窗口发生改变的时候，要重新设置canvas宽高
window.onresize=function(){
w=window.innerWidth;
h=window.innerHeight;
canvas.width=w;
canvas.height=h;
}
//矩形的画法
var canCon=canvas.getContext("2d");
var aRain=[];
function random(min,max){
return Math.random()*(max-min)+min;//random函数从0到1。所以我们要把它调到我们需要的大小。
}
function Rain(){};
Rain.prototype={
init:function(){
this.x=random(0,w);
this.y=0;
this.vY=random(4,5);//雨滴每秒钟下降的速度
this.h=random(0.8*h,0.9*h);//雨滴滴到地面的高度
this.r=1;//雨滴绽放的初始半径
this.vr=1;//雨滴半径扩大的速度
},
draw:function(){
if(this.y<this.h){
canCon.beginPath();
canCon.fillStyle="white";//颜色
canCon.fillRect(this.x,this.y,4,10);
}else{
canCon.beginPath();
canCon.strokeStyle="white";
canCon.arc(this.x,this.y,this.r,0,Math.PI*2);
canCon.stroke();
}
},
move:function(){
if(this.y<this.h){
this.y+=this.vY;//雨滴每秒钟下降4-5；
}else{
if(this.r<80){
this.r+=this.vr;
}else
this.init();
}
this.draw();//把移动的雨滴画出来
}
}
function createRain(num){
for(var i=0;i<num;i++){
setTimeout(function(){
var rain=new Rain();
rain.init();
rain.draw();
aRain.push(rain);
},200*i)
}
}
createRain(50);
setInterval(function(){
//加一层蒙版
canCon.fillStyle='rgba(0,0,0,0.05)';
canCon.fillRect(0,0,w,h);
for(var item of aRain){
//for of :指每一个元素
//for in: 指数组中每一个元素的下标
item.move();
}
},1000/60);
</script>
</body>
</html>