中秋节快乐简单html页面
<!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; // gravity
this.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放在一个目录下，效果如下：
