<!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;
padding: 0;
overflow: hidden;
background: #f0f0f0;
font-family: Arial, sans-serif;
touch-action: manipulation;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.instructions {
position: fixed;
bottom: 80px;
left: 0;
width: 100%;
text-align: center;
color: #666;
font-size: 18px;
z-index: 2;
pointer-events: none;
}
/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(0,0,0,0.7);
text-decoration: none;
font-size: 14px;
background: rgba(255,255,255,0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}
.custom-link:hover {
color: black;
background: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<canvas id="watercolorCanvas"></canvas>
<div class="instructions">点击或触摸屏幕创建水彩云雾效果</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('watercolorCanvas');
const ctx = canvas.getContext('2d');
// 设置canvas尺寸为窗口大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 粒子数组
let particles = [];
const colors = [
{r: 255, g: 107, b: 129}, // 粉红
{r: 255, g: 159, b: 67}, // 橙色
{r: 107, g: 137, b: 255}, // 蓝色
{r: 107, g: 255, b: 206}, // 青色
{r: 159, g: 107, b: 255} // 紫色
];
// 粒子类
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.size = Math.random() * 30 + 20;
this.color = color;
this.velocity = {
x: (Math.random() - 0.5) * 4,
y: (Math.random() - 0.5) * 4
};
this.alpha = 1;
this.decay = Math.random() * 0.01 + 0.005;
this.life = 1;
}
update() {
this.x += this.velocity.x;
this.y += this.velocity.y;
this.velocity.x *= 0.98;
this.velocity.y *= 0.98;
this.alpha *= 0.99;
this.life -= this.decay;
return this.life > 0;
}
draw() {
ctx.globalAlpha = this.alpha * 0.6;
// 创建径向渐变模拟水彩扩散
const gradient = ctx.createRadialGradient(
this.x, this.y, 0,
this.x, this.y, this.size
);
gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.alpha})`);
gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`);
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// 创建水彩效果
function createWatercolor(x, y) {
const particleCount = 15 + Math.floor(Math.random() * 10);
const color = colors[Math.floor(Math.random() * colors.length)];
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(x, y, color));
}
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 半透明填充制造水彩混合效果
ctx.fillStyle = 'rgba(240, 240, 240, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制所有粒子
particles = particles.filter(particle => {
particle.update();
particle.draw();
return particle.life > 0;
});
}
// 初始化动画
animate();
// 交互事件
canvas.addEventListener('click', function(e) {
createWatercolor(e.clientX, e.clientY);
});
canvas.addEventListener('touchstart', function(e) {
e.preventDefault();
const touch = e.touches[0];
createWatercolor(touch.clientX, touch.clientY);
});
canvas.addEventListener('touchmove', function(e) {
e.preventDefault();
const touch = e.touches[0];
createWatercolor(touch.clientX, touch.clientY);
});
});
</script>
</body>
</html>
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
