-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (126 loc) · 5.44 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas雨滴</title>
<style>
body,html{margin:0px;height:100%;}
ul,ol{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
canvas{background:#000;display: block;}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas标签，请更换浏览器！</canvas>
<script>
// window.requestAnimFram = (function(){
// // return
// })();
var can = document.getElementById('canvas');
var canContent = can.getContext('2d');
// 获取浏览器窗口宽高，并设置canvas全屏显示（必须给canvas设置宽高，否则会采用默认宽高，对后面绘图的坐标都难以控制（坐标和宽高都难以控制））
var w = can.width = window.innerWidth;
var h = can.height = window.innerHeight;
// 宽高响应式设置
window.onresize = function(){
w = can.width = window.innerWidth;
h = can.height = window.innerHeight;
console.log(w+' -- '+w/50)
}
// canContent.fillStyle='#f00';
// canContent.fillRect(100,100,50,50);//绘制矩形 前两个是坐标xy,后面两个是宽高
// canContent.fill(); 填充方法（实心）
// canContent.stroke();触笔方法（空心）
// canContent.rect(x,y,w,h);规定矩形的路径
// canContent.fill()和canContent.rect()可以用canContent.fillRect()代替
// canContent.arc(x,y,r,0,Math.PI*2,false); xy圆心坐标 r半径 0和Math.PI*2弧度 false逆时针
// canContent.arc(250,250,50,0,Math.PI*2,false);
// canContent.fill();
// var x=100,y=0;
/*setInterval(function(){
y++;
canContent.clearRect(0,0,w,h);
canContent.fillRect(x,y,50,50)
},1000/60);//1000/60兼容一般显卡*/
// move();//分号是语句结束的标记，js末尾建议带上分号，考虑性能问题。
// function move(){
// y++;
// canContent.clearRect(0,0,w,h);
// canContent.fillRect(x,y,50,50);
// requestAnimationFrame(move);//原生js的经动画，需要考虑兼容
// }
// 面相对像
var drops = [];//雨滴数组
// 创建雨滴对象
function Drop(){};
Drop.prototype = {
init:function(){//初始化方法（设置每个雨滴的初始属性）
this.x = random(0,w);
this.y = 0;
// y方向的速度值
this.vy = random(4,5);
// 雨滴下落的最大y值
this.l=random(0.8*h,0.9*h);
this.r=1;// 添加波纹初始半径
this.vr=1;// 波纹半径增大的速度
this.a = 1;// 判断雨滴消失的透明度
this.va = 0.96;//透明度的变化系数
},
draw:function(){//绘制图形
if(this.y > this.l){//雨滴已下落到指定位置,就绘制波纹
canContent.beginPath();//先开始路径，每次绘制前，先提笔
canContent.arc(this.x,this.y,this.r,0,Math.PI*2,false);
canContent.strokeStyle = 'rgb(0,255,255)';
canContent.stroke();
}else{//绘制下落的雨滴
canContent.fillStyle = 'rgb(0,255,255)';
canContent.fillRect(this.x,this.y,2,10);
}
this.update();//每次绘制都更新；
},
update:function(){//更新坐标位置
if(this.y<this.l){
this.y+=this.vy;
}else{//雨滴下落到指定位置
if(this.a>0.01){
this.r += this.vr;
if(this.r > 30 ){//当半径大于50后，透明度会越来越大
this.a *= this.va;
}
}else{
this.init();//雨滴重新初始化
}
}
},
}
// 生成随机数的方法
function random(min,max){
return Math.random()*(max-min)+min;//min-max之间的随机数
}
// 实例化对象
// var drop = new Drop();
// drop.init();//初始化
// drop.draw();//绘制
for(var i=0;i<30;i++){
setTimeout(function(){
var drop = new Drop();
drop.init();
drops.push(drop);//添加到雨滴数组
},i*300)
}
// console.log(drops)
move();
function move(){
// canContent.clearRect();
// 先绘制透明层，再绘制雨滴，雨滴就把先把先绘制的透明层覆盖，若干透明层叠加起来，就会越来也不透明
canContent.fillStyle = 'rgba(0,0,0,0.1)';
canContent.fillRect(0,0,w,h);
for(var i=0;i<drops.length;i++){
drops[i].draw();
}
requestAnimationFrame(move);
}
</script>
</body>
</html>