-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (93 loc) · 2.57 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
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas_snow" class="snow"></canvas>
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', function () {
var canvas = document.getElementById('canvas_snow'),
snowColor = '#c6dcf1',
ctx = canvas.getContext('2d'),
width = ctx.canvas.width = document.body.getBoundingClientRect().width,
height = ctx.canvas.height = screen.height,
animFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame,
snowflakes = [];
window.onresize = function () {
width = ctx.canvas.width = document.body.getBoundingClientRect().width;
height = ctx.canvas.height = screen.height;
for (var i = 0; i < snowflakes.length; i++) {
snowflakes[i].resized();
}
};
function update() {
for (var i = 0; i < snowflakes.length; i++) {
snowflakes[i].update();
}
}
function Snow() {
this.x = random(0, width);
this.y = random(-height, 0);
this.radius = random(0.5, 3.0);
this.speed = random(1, 3);
this.wind = random(-0.5, 3.0);
this.isResized = false;
this.updateData = function () {
this.x = random(0, width);
this.y = random(-height, 0);
}
this.resized = function () {
this.isResized = true;
}
}
Snow.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = snowColor;
ctx.fill();
ctx.closePath();
};
Snow.prototype.update = function () {
this.y += this.speed;
this.x += this.wind;
if (this.y > ctx.canvas.height) {
if (this.isResized) {
this.updateData();
this.isResized = false;
} else {
this.y = 0;
this.x = random(0, width);
}
}
};
function createSnow(count) {
for (var i = 0; i < count; i++) {
snowflakes[i] = new Snow();
}
}
function draw() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (var i = 0; i < snowflakes.length; i++) {
snowflakes[i].draw();
}
}
function loop() {
draw();
update();
animFrame(loop);
}
function random(min, max) {
var rand = (min + Math.random() * (max - min)).toFixed(1);
rand = Math.round(rand);
return rand;
}
createSnow(300);
loop();
});
</script>
</body>
</html>