<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态螺旋图形特效</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
canvas {
display: block;
}
.link {
color: white;
margin-top: 20px;
font-family: Arial, sans-serif;
text-decoration: none;
transition: color 0.3s;
}
.link:hover {
color: #00ffff;
}
</style>
</head>
<body>
<canvas id="spiralCanvas"></canvas>
<script>
const canvas = document.getElementById('spiralCanvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 60; // 为链接留出空间
// 螺旋参数
let angle = 0;
const radius = 5;
const spiralDensity = 0.1;
const maxPoints = 1000;
const points = [];
// 颜色参数
let hue = 0;
function drawSpiral() {
// 清除画布
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 计算新点
angle += 0.1;
const distance = radius * angle;
const x = canvas.width / 2 + Math.cos(angle) * distance * spiralDensity;
const y = canvas.height / 2 + Math.sin(angle) * distance * spiralDensity;
// 添加到点数组
points.push({x, y});
if (points.length > maxPoints) {
points.shift();
}
// 绘制所有点
for (let i = 0; i < points.length; i++) {
const point = points[i];
const size = i / points.length * 10;
const alpha = i / points.length;
// 颜色变化
hue = (hue + 0.5) % 360;
ctx.fillStyle = `hsla(${hue}, 100%, 50%, ${alpha})`;
ctx.beginPath();
ctx.arc(point.x, point.y, size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(drawSpiral);
}
// 窗口大小改变时调整画布大小
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 60;
});
// 开始动画
drawSpiral();
</script>
</body>
</html>
扫一扫
7105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
