html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- AUTHORED AND ORIGINATED
BY YIPMONG
COPYING WITHOUT GIVING THE APPROPRIATE CREDIT IS PROHIBITTED
-->
<title>HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas">
</canvas>
<script src="main.js"></script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
*{
padding: 0;
margin: 0;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
let cnv;
let ctx;
let circleArr;
window.onload = function() {
cnv = document.getElementById('canvas');
ctx = cnv.getContext('2d');
cnv.width = window.innerWidth;
cnv.height = window.innerHeight;
cnv.style.backgroundColor = 'black';
cnv.style.position = 'absolute';
cnv.style.top = '0';
cnv.style.left = '0';
circleArr = [];
for (let i = 0; i < 5; i++) {
circleArr.push(new Circle(ctx, cnv.width, cnv.height));
}
circleArr.forEach(circle => circle.animate());
alert("Hello\nThank you for visiting my code\nincase of an error or half-window display kindly refresh the page and it should work\nto view the full source code with proper comments that will guide you please headover to my github profile or click on this link\nhttps://github.com/Syipmong/circlePopJs/tree/main")
}
class Circle {
#ctx;
#width;
#height;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run