DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>title>
<style type="text/css">
* {margin: 0;padding: 0;}
html, body {height: 100%;overflow: hidden;}
style>
head>
<body>
<canvas>canvas>
body>
<script type="text/javascript">
window.onload = function() {
var oc = document.querySelector("canvas");
oc.width = document.documentElement.clientWidth;
oc.height = document.documentElement.clientHeight;
if (oc.getContext) {
var ctx = oc.getContext('2d');
var arr = [];
setInterval(() => {
var x = Math.random() * oc.width;
arr.push({
x,
y: 0,
r: Math.round(Math.random() * 5 + 1),
deg: 0,
step: Math.random()*10
});
}, 100);
setInterval(() => {
ctx.clearRect(0, 0, oc.width, oc.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, oc.width, oc.height);
for (let i = 0; i < arr.length; i++) {
if (arr[i].y >= oc.height) {
arr.splice(i, 1);
}
arr[i].deg += 5;
arr[i].y += 2;
arr[i].x += 2 * Math.sin(arr[i].deg * Math.PI / 180);
}
for (let i = 0; i < arr.length; i++) {
ctx.save();
ctx.fillStyle = "#FFFFFF";
const {x, y, r} = arr[i];
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
}
}, 1000 / 60);
}
}
script>
html>