Canvas圆形泡沫动画特效

原创已于 2025-06-27 11:17:41 修改 · 249 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-18 14:26:42 首次发布

<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: linear-gradient(135deg, #1a1a2e, #16213e);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}

canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}

.title {
position: fixed;
top: 30px;
left: 0;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-size: 2.5rem;
text-shadow: 0 0 10px rgba(100, 200, 255, 0.7);
z-index: 100;
pointer-events: none;
}

.controls {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 100;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 15px;
border-radius: 10px;
max-width: 300px;
}

.slider-container {
margin: 10px 0;
}

label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}

input[type="range"] {
width: 100%;
}

.credit {
position: fixed;
bottom: 10px;
right: 10px;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
z-index: 100;
}

.credit a {
color: rgba(100, 200, 255, 0.9);
text-decoration: none;
}

.credit a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="title">圆形泡沫动画</div>

<canvas id="bubbleCanvas"></canvas>

<div class="controls">
<div class="slider-container">
<label for="bubbleCount">泡沫数量: <span id="bubbleCountValue">100</span></label>
<input type="range" id="bubbleCount" min="20" max="300" value="100">
</div>
<div class="slider-container">
<label for="bubbleSize">泡沫大小: <span id="bubbleSizeValue">3</span></label>
<input type="range" id="bubbleSize" min="1" max="10" step="0.5" value="3">
</div>
<div class="slider-container">
<label for="riseSpeed">上升速度: <span id="riseSpeedValue">1</span></label>
<input type="range" id="riseSpeed" min="0.1" max="3" step="0.1" value="1">
</div>
<div class="slider-container">
<label for="wobbleAmount">摆动幅度: <span id="wobbleAmountValue">0.5</span></label>
<input type="range" id="wobbleAmount" min="0" max="2" step="0.1" value="0.5">
</div>
<button id="colorBtn">随机颜色</button>
</div>



<script>
// 初始化画布
const canvas = document.getElementById('bubbleCanvas');
const ctx = canvas.getContext('2d');

// 设置画布大小为窗口大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// 泡沫参数
const settings = {
bubbleCount: 100,
bubbleSize: 3,
riseSpeed: 1,
wobbleAmount: 0.5,
hue: 200,
saturation: 80,
lightness: 70,
bubbles: []
};

// 泡沫类
class Bubble {
constructor() {
this.reset();
this.size = Math.random() * settings.bubbleSize + 1;
}

reset() {
this.x = Math.random() * canvas.width;
this.y = canvas.height + Math.random() * 100;
this.speed = Math.random() * settings.riseSpeed * 0.5 + settings.riseSpeed * 0.5;
this.wobbleSpeed = Math.random() * 0.02 + 0.01;
this.wobbleAmount = Math.random() * settings.wobbleAmount;
this.opacity = Math.random() * 0.5 + 0.3;
this.hueOffset = Math.random() * 40 - 20;
}

update() {
// 上升
this.y -= this.speed;

// 左右摆动
this.x += Math.sin(Date.now() * this.wobbleSpeed) * this.wobbleAmount;

// 如果泡沫超出顶部，重置到底部
if (this.y < -this.size * 2) {
this.reset();
this.y = canvas.height + Math.random() * 100;
}
}

draw() {
const hue = settings.hue + this.hueOffset;
const saturation = settings.saturation;
const lightness = settings.lightness;

// 绘制泡沫
ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${this.opacity})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();

// 添加高光
ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness + 20}%, ${this.opacity * 0.8})`;
ctx.beginPath();
ctx.arc(
this.x - this.size * 0.3,
this.y - this.size * 0.3,
this.size * 0.3,
0,
Math.PI * 2
);
ctx.fill();

// 添加发光效果
ctx.shadowBlur = this.size * 2;
ctx.shadowColor = `hsla(${hue}, ${saturation}%, ${lightness}%, 0.3)`;
}
}

// 初始化泡沫
function initBubbles() {
settings.bubbles = [];
for (let i = 0; i < settings.bubbleCount; i++) {
settings.bubbles.push(new Bubble());
}
}

initBubbles();

// 动画循环
function animate() {
// 清除画布（使用半透明黑色实现拖尾效果）
ctx.fillStyle = 'rgba(10, 15, 30, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 更新并绘制所有泡沫
ctx.shadowBlur = 0;
settings.bubbles.forEach(bubble => {
bubble.update();
bubble.draw();
});

requestAnimationFrame(animate);
}

animate();

// 控制面板交互
document.getElementById('bubbleCount').addEventListener('input', function() {
settings.bubbleCount = parseInt(this.value);
document.getElementById('bubbleCountValue').textContent = this.value;
initBubbles();
});

document.getElementById('bubbleSize').addEventListener('input', function() {
settings.bubbleSize = parseFloat(this.value);
document.getElementById('bubbleSizeValue').textContent = this.value;
settings.bubbles.forEach(bubble => {
bubble.size = Math.random() * settings.bubbleSize + 1;
});
});

document.getElementById('riseSpeed').addEventListener('input', function() {
settings.riseSpeed = parseFloat(this.value);
document.getElementById('riseSpeedValue').textContent = this.value;
settings.bubbles.forEach(bubble => {
bubble.speed = Math.random() * settings.riseSpeed * 0.5 + settings.riseSpeed * 0.5;
});
});

document.getElementById('wobbleAmount').addEventListener('input', function() {
settings.wobbleAmount = parseFloat(this.value);
document.getElementById('wobbleAmountValue').textContent = this.value;
settings.bubbles.forEach(bubble => {
bubble.wobbleAmount = Math.random() * settings.wobbleAmount;
});
});

document.getElementById('colorBtn').addEventListener('click', function() {
settings.hue = Math.floor(Math.random() * 360);
initBubbles();
});

// 鼠标交互 - 点击添加泡沫
canvas.addEventListener('click', (e) => {
for (let i = 0; i < 5; i++) {
const bubble = new Bubble();
bubble.x = e.clientX + Math.random() * 40 - 20;
bubble.y = e.clientY + Math.random() * 40 - 20;
settings.bubbles.push(bubble);
}
});

canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
for (let i = 0; i < 5; i++) {
const bubble = new Bubble();
bubble.x = touch.clientX + Math.random() * 40 - 20;
bubble.y = touch.clientY + Math.random() * 40 - 20;
settings.bubbles.push(bubble);
}
}, { passive: false });
</script>
</body>
</html>