2025蛇年喜庆HTML5代码
以下是一个简单的HTML5 + CSS + JavaScript代码示例，用于庆祝2025年蛇年。
先看效果图：
源码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2025年蛇年快乐！</title> <style> body { font-family: 'Arial', sans-serif; background-color: #0a0a23; /* 深蓝色背景 */ color: #ffffff; /* 白色文字 */ text-align: center; margin: 0; overflow: hidden; } h1 { font-size: 3em; margin-top: 20px; } p { font-size: 1.5em; margin-bottom: 20px; } canvas { display: block; margin: 0 auto; background-color: transparent; } </style> </head> <body> <h1>2025年蛇年快乐！</h1> <p>祝您在新的一年里，身体健康，万事如意！</p> <canvas id="snakeCanvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById('snakeCanvas'); const ctx = canvas.getContext('2d'); // 蛇的初始位置和参数 let snake = { x: 400, y: 300, segments: 30, // 蛇的节数 segmentLength: 15, // 每节的长度 angle: 0, // 蛇的角度 speed: 2, // 蛇的移动速度 trail: [] // 蛇的轨迹 }; // 烟花数组 let fireworks = []; // 烟花构造函数 function Firework(x, y) { this.x = x; this.y = y; this.particles = []; for (let i = 0; i < 60; i++) { // 增加粒子数量 const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 8 + 3; // 增加扩散速度 *8 + 3; this.particles.push({ x: this.x, y: this.y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, alpha: 1, color: `hsl(${Math.random() * 360}, 100%, 50%)` }); } } // 更新烟花状态 Firework.prototype.update = function() { this.particles.forEach(particle => { particle.x += particle.vx; particle.y += particle.vy; particle.alpha -= 0.02; }); this.particles = this.particles.filter(particle => particle.alpha > 0); }; // 绘制烟花粒子 Firework.prototype.draw = function() { this.particles.forEach(particle => { ctx.fillStyle = particle.color; ctx.globalAlpha = particle.alpha; ctx.beginPath(); ctx.arc(particle.x, particle.y, 3, 0, Math.PI * 2); // 增大粒子大小3 ctx.fill(); }); ctx.globalAlpha = 1; }; // 绘制蛇 function drawSnake() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新蛇的角度 snake.angle += 0.05; // 计算蛇头的新位置 snake.x += Math.cos(snake.angle) * snake.speed; snake.y += Math.sin(snake.angle) * snake.speed; // 将新位置添加到轨迹中 snake.trail.push({ x: snake.x, y: snake.y }); // 如果轨迹长度超过蛇的节数，移除最旧的点 if (snake.trail.length > snake.segments) { snake.trail.shift(); } // 绘制蛇的身体 ctx.strokeStyle = '#d9534f'; ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.beginPath(); for (let i = 0; i < snake.trail.length - 1; i++) { const x1 = snake.trail[i].x; const y1 = snake.trail[i].y; const x2 = snake.trail[i + 1].x; const y2 = snake.trail[i + 1].y; ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); } ctx.stroke(); // 绘制蛇头 drawSnakeHead(snake.x, snake.y, snake.angle); // 更新并绘制烟花 fireworks.forEach((firework, index) => { firework.update(); firework.draw(); if (firework.particles.length === 0) { fireworks.splice(index, 1); } }); // 随机生成烟花 if (Math.random() < 0.03) { // 控制烟花出现的频度 const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; fireworks.push(new Firework(x, y)); } // 循环动画 requestAnimationFrame(drawSnake); } // 绘制蛇头 function drawSnakeHead(x, y, angle) { ctx.save(); ctx.translate(x, y); ctx.rotate(angle); // 绘制头部形状（椭圆形） ctx.fillStyle = '#d9534f'; ctx.beginPath(); ctx.ellipse(0, 0, 20, 15, 0, 0, Math.PI * 2); ctx.fill(); // 绘制眼睛 const eyeOffsetX = 10; // 眼睛距离中心点的水平偏移 const eyeOffsetY = 5; // 眼睛距离中心点的垂直偏移 ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(eyeOffsetX, eyeOffsetY, 4, 0, Math.PI * 2); // 左眼 ctx.arc(eyeOffsetX, -eyeOffsetY, 4, 0, Math.PI * 2); // 右眼 ctx.fill(); // 绘制瞳孔 ctx.fillStyle = 'black'; ctx.beginPath(); ctx.arc(eyeOffsetX, eyeOffsetY, 2, 0, Math.PI * 2); // 左瞳孔 ctx.arc(eyeOffsetX, -eyeOffsetY, 2, 0, Math.PI * 2); // 右瞳孔 ctx.fill(); // 绘制舌头 ctx.strokeStyle = 'red'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(20, 0); // 舌头起点 ctx.lineTo(30, -5); // 舌头分叉点 1 ctx.moveTo(20, 0); // 回到起点 ctx.lineTo(30, 5); // 舌头分叉点 2 ctx.stroke(); ctx.restore(); } // 启动动画 drawSnake(); </script> </body> </html>
