This repository has been archived by the owner on Dec 31, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas.html
119 lines (106 loc) · 3.85 KB
/
canvas.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
<html>
<head>
<script>
let circles;
let animationFrame;
let playState;
const circlesCount = 12;
const colors = [
'#455622',
'#12ac45',
'#fecf45',
'#443ab3',
'#222233'
]
class Circle {
x;
y;
dx;
dy;
radius;
style;
constructor(
x = 200,
y = 200,
dx = 3,
dy = 3,
radius = 30,
style = 'rgb(255,100,0)'
) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.style = style;
}
draw() {
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI * 2,false);
ctx.strokeStyle = this.style;
ctx.stroke();
}
update() {
if (this.x + this.radius > window.innerWidth || this.x - this.radius < 0) this.dx = -this.dx;
if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) this.dy = -this.dy;
this.x += this.dx;
this.y += this.dy;
this.draw();
}
}
const init = () => {
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
window.ctx = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
circles = Array(circlesCount).fill(null).map(() => factory());
document.getElementById("canvas").addEventListener('click', (e) => {
if (playState) {
endFrame();
} else {
gotoFrame();
}
})
window.addEventListener('resize', () => {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
})
gotoFrame();
}
const gotoFrame = () => {
animationFrame = window.requestAnimationFrame(gotoFrame);
ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
circles.map((circle) => circle.update());
playState = true;
}
const endFrame = () => {
window.cancelAnimationFrame(animationFrame);
playState = false;
}
const factory = () => {
const radius = 30,
x = Math.random() * (window.innerWidth - radius * 2) + radius,
y = Math.random() * (window.innerHeight - radius * 2) + radius,
dx = (Math.random() * .5) * 5,
dy = (Math.random() * .5) * 5,
colorIndex = Math.floor(Math.random() * colors.length);
return new Circle(x,y,dx,dy,radius,colors[colorIndex]);
}
</script>
<style>
canvas {
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
body {
margin:0;
}
</style>
</head>
<body onload="init();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>