-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas.html
80 lines (74 loc) · 1.88 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
<!doctype html>
<html lang="en">
<head>
<title>canvas</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
}
</style>
<canvas></canvas>
<script type="text/javascript">
class Circle {
constructor(cx, cy, dx, dy, radius, strokeColor, strokeWidth) {
this.cx = cx;
this.cy = cy;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.stroke = strokeColor;
this.strokeWidth = strokeWidth;
}
draw() {
ctx.beginPath();
ctx.arc(this.cx, this.cy, this.radius, 0, Math.PI / 180 * 360, false);
ctx.strokeStyle = this.stroke;
ctx.lineWidth = this.strokeWidth;
ctx.stroke();
}
update() {
if (this.cx + this.radius > canvas.width || this.cx - this.radius < 0) {
this.dx = -this.dx;
}
if (this.cy + this.radius > canvas.height || this.cy - this.radius < 0) {
this.dy = -this.dy;
}
this.cx += this.dx;
this.cy += this.dy;
this.draw();
}
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
circleList.forEach(function (item) {
item.update();
})
}
let canvas = document.querySelector("canvas");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
let ctx = canvas.getContext("2d");
let circleList = [];
for (let i = 0; i !== 50; i++) {
let cx = Math.random() * canvas.width;
let cy = Math.random() * canvas.height;
let dx = Math.random() * 5;
let dy = Math.random() * 5;
let radius = Math.random() * 50 + 20;
let strokeColor = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
let strokeWidth = Math.random() * 3;
circleList.push(new Circle(cx, cy, dx, dy, radius, strokeColor, strokeWidth));
}
animate();
</script>
<body>
</body>
</html>