<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中秋快乐</title>
<style>@font-face {font-family: 'HeiTi';src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap');}body, html {margin: 0;padding: 0;overflow: hidden;background: url('zhongqiu1.jpg') no-repeat center center fixed;background-size: cover;}canvas {display: block;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const backgroundImage = new Image();backgroundImage.src = 'zhongqiu1.jpg';let backgroundLoaded = false;backgroundImage.onload = () => {ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);backgroundLoaded = true;};class Spark {constructor(x, y, speedX, speedY, color) {this.x = x;this.y = y;this.speedX = speedX;this.speedY = speedY;this.color = color;this.alpha = 1;this.fade = 0.02;}update() {this.x += this.speedX;this.y += this.speedY;this.speedX *= 0.98;this.speedY *= 0.98;this.speedY += 0.1; // gravitythis.alpha -= this.fade;}draw() {ctx.save();ctx.globalAlpha = this.alpha;ctx.beginPath();ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();ctx.restore();}}class Firework {constructor(x, y, targetX, targetY) {this.x = x;this.y = y;this.targetX = targetX;this.targetY = targetY;this.sparks = [];this.exploded = false;this.speed = 2;this.color = this.randomColor();}randomColor() {const r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);return `rgb(${r}, ${g}, ${b})`;}update() {if (!this.exploded) {const dx = this.targetX - this.x;const dy = this.targetY - this.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 5) {this.exploded = true;for (let i = 0; i < 100; i++) {const angle = Math.random() * 2 * Math.PI;const speed = Math.random() * 5;const sparkX = this.x;const sparkY = this.y;const sparkSpeedX = Math.cos(angle) * speed;const sparkSpeedY = Math.sin(angle) * speed;this.sparks.push(new Spark(sparkX, sparkY, sparkSpeedX, sparkSpeedY, this.randomColor()));}} else {this.x += dx / distance * this.speed;this.y += dy / distance * this.speed;}} else {this.sparks.forEach(spark => spark.update());this.sparks = this.sparks.filter(spark => spark.alpha > 0);}}draw() {if (!this.exploded) {ctx.beginPath();ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();} else {this.sparks.forEach(spark => spark.draw());}}}const fireworks = [];setInterval(() => {const x = Math.random() * canvas.width;const y = canvas.height;const targetX = Math.random() * canvas.width;const targetY = Math.random() * canvas.height / 2;fireworks.push(new Firework(x, y, targetX, targetY));}, 500);function drawMoon() {const moonX = canvas.width - 150; // 调整X坐标const moonY = 150; // 调整Y坐标const moonRadius = 50;ctx.beginPath();ctx.arc(moonX, moonY, moonRadius, 0, Math.PI * 2);ctx.fillStyle = 'yellow';ctx.fill();}let textAngle = 0;<!-- const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']; -->const colors = ['red', 'orange', 'yellow'];let colorIndex = 0;function updateTextColor() {colorIndex = (colorIndex + 1) % colors.length;}setInterval(updateTextColor, 1000); // 每1秒更新一次颜色function drawText() {const text = '中秋节快乐';ctx.font = '96px "仿宋"'; // 增大字体大小，并加粗ctx.textAlign = 'center';const textX = canvas.width / 2;const textY = canvas.height / 2;// 计算文本宽度和高度const metrics = ctx.measureText(text);const textWidth = metrics.width;const textHeight = 96; // 字体大小// 绘制半透明的白色矩形背景ctx.save();ctx.globalAlpha = 0.09; // 设置透明度ctx.fillStyle = 'white';ctx.fillRect(textX - textWidth / 2 - 20, textY - textHeight / 2 - 60, textWidth + 60, textHeight + 60);ctx.restore();// 绘制晃动的文字ctx.save();ctx.translate(textX, textY);ctx.rotate(Math.sin(textAngle) * 0.1); // 以底部为圆心左右晃动ctx.translate(-textX, -textY);ctx.fillStyle = colors[colorIndex];ctx.fillText(text, textX, textY);ctx.restore();textAngle += 0.05; // 调整晃动速度}function animate() {if (backgroundLoaded) {// 绘制半透明黑色背景，保留烟花拖尾效果ctx.globalAlpha = 0.1;ctx.fillStyle = 'black';ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.globalAlpha = 1;fireworks.forEach(firework => {firework.update();firework.draw();});drawMoon();drawText();}requestAnimationFrame(animate);}animate(); // 启动动画循环
</script>
</body>
</html>然后把zhongqiu1.jpg替换成自己的，和html放在一个目录下，效果如下：
