<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas线条向上游动背景特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
text-align: center;
padding: 20px;
max-width: 800px;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
p {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 30px;
}
.footer {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
z-index: 3;
}
.footer a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
}
.footer a:hover {
color: #4fc3f7;
text-decoration: underline;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="content">
<h1>线条流动背景特效</h1>
<p>这是一个使用HTML5 Canvas创建的动态背景效果，模拟线条向上游动的视觉效果。线条会随机生成不同颜色和速度，创造出流动的视觉效果。</p>
</div>
<script>
// 初始化Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置Canvas大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 线条数组
const lines = [];
const lineCount = Math.floor(canvas.width * canvas.height / 10000);
// 颜色数组
const colors = [
'rgba(0, 150, 255, 0.8)',
'rgba(0, 255, 255, 0.8)',
'rgba(50, 255, 150, 0.8)',
'rgba(255, 100, 255, 0.8)',
'rgba(255, 255, 100, 0.8)',
'rgba(255, 150, 50, 0.8)'
];
// 线条类
class Line {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = canvas.height + Math.random() * 100;
this.width = Math.random() * 3 + 1;
this.height = Math.random() * 50 + 20;
this.speed = Math.random() * 3 + 1;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.opacity = Math.random() * 0.5 + 0.5;
this.curve = Math.random() * 20 - 10;
}
update() {
this.y -= this.speed;
// 添加一些曲线运动
this.x += Math.sin(this.y * 0.01) * 0.5;
// 如果线条移出屏幕顶部，重置到底部
if (this.y < -this.height) {
this.reset();
this.y = canvas.height + Math.random() * 100;
}
}
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
// 创建渐变效果
const gradient = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.height);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(0.3, this.color);
gradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.strokeStyle = gradient;
ctx.lineWidth = this.width;
ctx.beginPath();
// 添加一些曲线
const midY = this.y + this.height / 2;
const cp1x = this.x + this.curve;
const cp2x = this.x + this.curve;
ctx.moveTo(this.x, this.y);
ctx.bezierCurveTo(
cp1x, this.y + this.height * 0.3,
cp2x, this.y + this.height * 0.7,
this.x, this.y + this.height
);
ctx.stroke();
ctx.restore();
}
}
// 创建初始线条
for (let i = 0; i < lineCount; i++) {
lines.push(new Line());
// 让线条初始位置分散开
lines[i].y = Math.random() * canvas.height * 2;
}
// 动画循环
function animate() {
// 半透明黑色背景实现拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制所有线条
lines.forEach(line => {
line.update();
line.draw();
});
requestAnimationFrame(animate);
}
// 窗口大小改变时重置Canvas
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 开始动画
animate();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
