<!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: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);
height: 100vh;
}
canvas {
display: block;
}
.info {
position: absolute;
bottom: 10px;
left: 10px;
color: white;
font-family: Arial, sans-serif;
font-size: 12px;
opacity: 0.7;
}
</style>
</head>
<body>
<canvas id="rainCanvas"></canvas>
<div class="info">下雨特效演示</div>
<script>
// 初始化画布
const canvas = document.getElementById('rainCanvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 雨滴数组
const rainDrops = [];
const rainCount = Math.floor(canvas.width * canvas.height / 1000);
// 雨滴类
class RainDrop {
constructor() {
this.reset();
this.z = Math.random() * 0.5 + 0.5; // 深度值 (0.5-1)
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * -canvas.height;
this.speed = Math.random() * 5 + 5;
this.length = Math.random() * 20 + 10;
this.opacity = Math.random() * 0.6 + 0.1;
}
update() {
this.y += this.speed * this.z;
if (this.y > canvas.height) {
this.reset();
}
}
draw() {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x, this.y + this.length * this.z);
ctx.strokeStyle = `rgba(174, 194, 224, ${this.opacity})`;
ctx.lineWidth = 1 * this.z;
ctx.stroke();
}
}
// 创建雨滴
for (let i = 0; i < rainCount; i++) {
rainDrops.push(new RainDrop());
}
// 涟漪效果
const ripples = [];
class Ripple {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = 0;
this.maxRadius = Math.random() * 10 + 5;
this.opacity = Math.random() * 0.4 + 0.1;
this.speed = Math.random() * 0.5 + 0.5;
}
update() {
this.radius += this.speed;
this.opacity -= 0.01;
return this.opacity > 0;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.strokeStyle = `rgba(174, 194, 224, ${this.opacity})`;
ctx.lineWidth = 1;
ctx.stroke();
}
}
// 动画循环
function animate() {
// 清除画布，添加半透明黑色层实现拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制雨滴
rainDrops.forEach(drop => {
drop.update();
drop.draw();
// 随机创建涟漪
if (drop.y > 0 && Math.random() < 0.001 * drop.z) {
ripples.push(new Ripple(drop.x, canvas.height - 10));
}
});
// 更新和绘制涟漪
for (let i = ripples.length - 1; i >= 0; i--) {
if (!ripples[i].update()) {
ripples.splice(i, 1);
} else {
ripples[i].draw();
}
}
requestAnimationFrame(animate);
}
// 窗口大小调整时重置画布
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 点击时创建更多涟漪
canvas.addEventListener('click', (e) => {
for (let i = 0; i < 5; i++) {
ripples.push(new Ripple(e.clientX, e.clientY));
}
});
// 开始动画
animate();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
