<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let round = []
function random(max = 1, min = 0) {
return parseInt(Math.random() * (max - min)) + min;
}
class renderItem {
constructor(ctx, index, x, y, width, height) {
this.ctx = ctx;
this.index = index;
this.x = x;
this.y = y;
this.r = random(parseInt(width / 10), parseInt(width / 20));
this.o = (Math.random() + 0.1).toFixed(1)
this.a = random(3, 1) === 2
this.color = `rgba(${random(250, 50)}, ${random(240, 0)}, ${random(255, 200)}, 0.3)`
};
draw() {
this.ctx.fillStyle = this.color;
this.ctx.shadowBlur = this.r * 2;
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
this.ctx.closePath();
this.ctx.fill();
};
move(width, height) {
this.y -= this.o
if (this.a) {
this.x -= 0.2
} else {
this.x += 0.2
}
const step = 50
if (this.y <= -step || this.x <= -step || this.x > (width + step)) {
this.y = height + step;
this.x = random(width);
}
this.draw()
}
}
function animate(ctx, width, height) {
ctx.clearRect(0, 0, width, height);
round.forEach(v => {
v.move(width, height)
})
requestAnimationFrame(animate.bind(this, ctx, width, height))
}
function init(ctx, ornage, width, height) {
for (var i = 0; i < ornage; i++) {
round[i] = new renderItem(ctx, i, random(width), random(height), width, height);
round[i].draw();
}
animate(ctx, width, height);
}
const width = document.documentElement.clientWidth
const height = document.documentElement.clientHeight
// 背景动画
const cvs = document.createElement('canvas')
document.body.appendChild(cvs)
const ctx = cvs.getContext('2d')
cvs.style.zIndex = 200;
cvs.style.position = 'fixed'
cvs.style.top = 0;
cvs.style.left = 0
cvs.style.right = 0
cvs.style.bottom = 0
cvs.style.pointerEvents = 'none'
cvs.width = width;
cvs.height = height;
let orange = parseInt(width / 50) >= 20 ? 20 : parseInt(width / 50)
init(ctx, orange, width, height)
</script>
</body>
</html>