# 怎么用JS代碼實現動態的元宵節湯圓特效
## 前言
元宵節是中國傳統節日之一，吃湯圓象征著團圓美滿。本文將詳細介紹如何用JavaScript創建動態的元宵節湯圓特效，包含完整代碼實現和原理講解。這個特效將包含：
- 隨機生成的彩色湯圓
- 鼠標交互效果
- 動畫飄動效果
- 節日祝福文字特效
## 一、HTML基礎結構
首先創建基礎的HTML結構：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元宵節湯圓特效</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #f8e8e8;
font-family: 'Microsoft YaHei', sans-serif;
}
#canvas {
display: block;
}
.greeting {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #d4237a;
font-size: 3em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 1s;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="greeting" id="greeting">元宵節快樂</div>
<script src="script.js"></script>
</body>
</html>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const greeting = document.getElementById('greeting');
// 設置畫布大小為窗口尺寸
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 湯圓數組
const tangyuans = [];
const colors = ['#FFE4E1', '#FFDAB9', '#FFC0CB', '#FFB6C1', '#FFA07A', '#FF8C00'];
class Tangyuan {
constructor() {
this.reset();
this.size = Math.random() * 30 + 20;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.rotation = Math.random() * Math.PI * 2;
this.rotationSpeed = (Math.random() - 0.5) * 0.02;
}
reset() {
this.x = Math.random() * canvas.width;
this.y = canvas.height + Math.random() * 100;
this.speedY = Math.random() * -1 - 1;
this.speedX = (Math.random() - 0.5) * 2;
this.opacity = Math.random() * 0.5 + 0.5;
}
update() {
this.y += this.speedY;
this.x += this.speedX;
this.rotation += this.rotationSpeed;
// 添加一些隨機擺動
if (Math.random() > 0.95) {
this.speedX = (Math.random() - 0.5) * 2;
}
// 如果湯圓超出屏幕，重置
if (this.y < -50 || this.x < -50 || this.x > canvas.width + 50) {
this.reset();
}
}
draw() {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.globalAlpha = this.opacity;
// 繪制湯圓主體
ctx.beginPath();
ctx.arc(0, 0, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
// 繪制高光
ctx.beginPath();
ctx.arc(-this.size * 0.3, -this.size * 0.3, this.size * 0.2, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
ctx.fill();
// 繪制表情（隨機）
if (Math.random() > 0.7) {
ctx.beginPath();
// 眼睛
ctx.arc(-this.size * 0.2, -this.size * 0.1, this.size * 0.1, 0, Math.PI * 2);
ctx.arc(this.size * 0.2, -this.size * 0.1, this.size * 0.1, 0, Math.PI * 2);
ctx.fillStyle = '#333';
ctx.fill();
// 嘴巴
ctx.beginPath();
ctx.arc(0, this.size * 0.1, this.size * 0.2, 0, Math.PI);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();
}
ctx.restore();
}
}
// 創建50個湯圓
for (let i = 0; i < 50; i++) {
tangyuans.push(new Tangyuan());
}
// 鼠標交互效果
let mouseX = 0, mouseY = 0;
canvas.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
// 顯示祝福語
greeting.style.opacity = 1;
setTimeout(() => {
greeting.style.opacity = 0;
}, 2000);
});
// 動畫循環
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新并繪制所有湯圓
tangyuans.forEach(tangyuan => {
// 鼠標交互：當鼠標靠近時湯圓會避開
const dx = tangyuan.x - mouseX;
const dy = tangyuan.y - mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
tangyuan.x += dx / distance * 2;
tangyuan.y += dy / distance * 2;
}
tangyuan.update();
tangyuan.draw();
});
requestAnimationFrame(animate);
}
animate();
// 在animate函數中添加背景裝飾
function drawDecorations() {
// 繪制燈籠
ctx.save();
ctx.fillStyle = '#FF5252';
ctx.shadowColor = 'rgba(0,0,0,0.3)';
ctx.shadowBlur = 10;
// 左右各一個燈籠
for (let i = 0; i < 2; i++) {
const x = i === 0 ? canvas.width * 0.2 : canvas.width * 0.8;
const y = 100;
// 燈籠主體
ctx.beginPath();
ctx.ellipse(x, y, 40, 60, 0, 0, Math.PI * 2);
ctx.fill();
// 燈籠頂部和底部
ctx.fillStyle = '#FFD700';
ctx.beginPath();
ctx.rect(x - 45, y - 70, 90, 15);
ctx.fill();
ctx.beginPath();
ctx.rect(x - 45, y + 55, 90, 15);
ctx.fill();
// 燈籠穗
ctx.strokeStyle = '#FFD700';
ctx.lineWidth = 2;
for (let j = 0; j < 10; j++) {
ctx.beginPath();
ctx.moveTo(x - 35 + j * 8, y + 70);
ctx.lineTo(x - 40 + j * 8, y + 100);
ctx.stroke();
}
}
ctx.restore();
// 繪制"福"字
ctx.save();
ctx.fillStyle = '#D4237A';
ctx.font = 'bold 80px KaiTi';
ctx.textAlign = 'center';
ctx.fillText('福', canvas.width / 2, 120);
ctx.restore();
}
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.particles = [];
this.createParticles();
}
createParticles() {
const count = 30;
const color = `hsl(${Math.random() * 60 + 300}, 100%, 50%)`;
for (let i = 0; i < count; i++) {
const angle = (i / count) * Math.PI * 2;
const speed = Math.random() * 3 + 2;
this.particles.push({
x: this.x,
y: this.y,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
radius: Math.random() * 3 + 2,
color,
life: 100
});
}
}
update() {
for (let i = 0; i < this.particles.length; i++) {
const p = this.particles[i];
p.x += p.vx;
p.y += p.vy;
p.vy += 0.05; // 重力
p.life--;
}
this.particles = this.particles.filter(p => p.life > 0);
return this.particles.length > 0;
}
draw() {
for (const p of this.particles) {
ctx.globalAlpha = p.life / 100;
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
}
ctx.globalAlpha = 1;
}
}
// 在animate函數中添加煙花
let fireworks = [];
let lastFirework = 0;
function addFirework() {
const now = Date.now();
if (now - lastFirework > 1000) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height * 0.5;
fireworks.push(new Firework(x, y));
lastFirework = now;
}
}
// 在animate循環中添加
addFirework();
fireworks = fireworks.filter(fw => fw.update());
fireworks.forEach(fw => fw.draw());
將所有代碼整合到script.js中：
// [此處整合前面所有JavaScript代碼]
性能優化：
視覺效果增強：
交互增強：
通過這個教程，我們實現了一個完整的元宵節湯圓特效，涵蓋了Canvas繪圖、動畫原理、物理模擬和交互設計等前端技術。你可以根據自己的需求進一步擴展這個特效，比如添加更多節日元素或實現更復雜的交互效果。
祝大家元宵節快樂，團團圓圓！
完整項目代碼可在GitHub獲?。?a >github.com/example/yuanxiao-effect
效果預覽：example.com/yuanxiao-demo “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
