<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<script>
let stars = []
// 配置
const config = {
color: false, // 图案颜色, 如果为false则使用随机颜色
size: 0, // 图案大小, 如果为0则使用随机大小
o: 1, // 递减值，数值越大图案消失越快
orange: 30, // 图案分散程度
opacity: 0.5, // 图案透明度，取值 0-1之间,在颜色随机的情况下有效
}
function random(max = 1, min = 0) {
return parseInt(Math.random() * (max - min)) + min;
}
function renderStars(ctx, x, y, size, color) {
let R = size
let r = size / 2.5
//设置是个顶点的坐标，根据顶点制定路径
ctx.beginPath()
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x,
-Math.sin((18 + i * 72) / 180 * Math.PI) * R + y);
ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x,
-Math.sin((54 + i * 72) / 180 * Math.PI) * r + y);
}
ctx.closePath()
ctx.strokeStyle = color
ctx.stroke()
}
window.onmousemove = e => {
stars.push({
color: config.color || `rgba(${random(250, 50)}, ${random(240, 0)}, ${random(255, 200)}, ${config.opacity})`,
x: e.clientX + random(config.orange),
y: e.clientY + random(config.orange),
size: config.size || random(20) + 5,
orange: config.orange,
})
}
function animateTwo(ctx, width, height) {
ctx.clearRect(0, 0, width, height)
for (let i = 0; i < stars.length; i++) {
let item = stars[i]
item.size -= config.o
if (item.size <= 0) {
stars.splice(i, 1)
i--
}
renderStars(ctx, item.x, item.y, item.size, item.color)
}
requestAnimationFrame(animateTwo.bind(this, ctx, width, height))
}
window.onload = function () {
const width = document.documentElement.clientWidth
const height = document.documentElement.clientHeight
const cvs2 = document.createElement('canvas')
document.body.appendChild(cvs2)
const ctx2 = cvs2.getContext('2d')
cvs2.style.zIndex = 200;
cvs2.style.position = 'fixed'
cvs2.style.top = 0;
cvs2.style.left = 0
cvs2.style.right = 0
cvs2.style.bottom = 0
cvs2.style.pointerEvents = 'none'
cvs2.width = width;
cvs2.height = height;
animateTwo(ctx2, width, height)
}
</script>
</body>
</html>