国庆节快乐：中国国旗绘制与烟花效果（pc）-优快云博客

明天就是国庆了，提前祝大家国庆快乐!

不知道大家下班了没？

效果：（不太适合移动端）

适配移动端的请点这
代码如下：

<!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: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: black;
        font-family: "Microsoft YaHei", "SimHei", sans-serif;
        overflow: hidden;
      }

      .container {
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
        z-index: 10;
        position: relative;
      }

      .flag-container {
        position: relative;
        margin: 20px auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        overflow: hidden;
        background: white;
        padding: 10px;
      }

      canvas {
        display: block;
        margin: 0 auto;
        border: 2px solid #b31b00;
        border-radius: 4px;
      }

      .greeting {
        margin-top: 30px;
        padding: 25px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        border: 2px solid #ffde00;
      }

      h1 {
        color: #c70000;
        font-size: 2.8em;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        background: linear-gradient(45deg, #c70000, #ff8c00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      p {
        font-size: 1.3em;
        color: #333;
        line-height: 1.6;
        margin: 10px 0;
      }

      .fireworks-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
      }

      .firework {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        box-shadow: 0 0 10px 2px;
      }

      .message {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
        color: #ffde00;
        text-shadow: 0 0 10px #c70000;
        opacity: 0;
        animation: floatMessage 3s ease-in-out forwards;
        z-index: 100;
        pointer-events: none;
      }

      @keyframes floatMessage {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.5);
        }
        50% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="fireworks-container" id="fireworksContainer"></div>

    <div class="container">
      <div class="flag-container">
        <canvas id="chinaFlag" width="600" height="400"></canvas>
      </div>

      <div class="greeting">
        <h1>🎉 国庆快乐！ 🎉</h1>
        <p>祝福伟大的祖国繁荣昌盛、国泰民安！</p>
        <p>愿中华民族走向更加辉煌的明天！</p>
        <p>我爱你，中国！ ❤️</p>
      </div>
    </div>

    <script>
      // 绘制中国国旗
      function drawChinaFlag() {
        const canvas = document.getElementById("chinaFlag");
        const ctx = canvas.getContext("2d");

        // 国旗尺寸比例 3:2
        const width = canvas.width;
        const height = canvas.height;

        // 清除画布
        ctx.clearRect(0, 0, width, height);

        // 绘制红色背景
        ctx.fillStyle = "#de2910"; // 中国红
        ctx.fillRect(0, 0, width, height);

        // 计算五角星位置和大小
        const flagUnit = height / 20; // 国旗网格单位
        const bigStarRadius = flagUnit * 3; // 大五角星半径
        const smallStarRadius = flagUnit; // 小五角星半径

        // 大五角星位置 (左上角)
        const bigStarX = flagUnit * 5;
        const bigStarY = flagUnit * 5;

        // 绘制大五角星
        drawStar(ctx, bigStarX, bigStarY, bigStarRadius, 0, "#ffde00");

        // 四个小五角星的位置 (以弧形排列)
        const smallStars = [
          { x: flagUnit * 10, y: flagUnit * 2, angle: -Math.PI / 10 },
          { x: flagUnit * 12, y: flagUnit * 4, angle: 0 },
          { x: flagUnit * 12, y: flagUnit * 7, angle: Math.PI / 10 },
          { x: flagUnit * 10, y: flagUnit * 9, angle: Math.PI / 5 },
        ];

        // 绘制四个小五角星，每个小星的一个角指向大星中心
        smallStars.forEach((star) => {
          // 计算指向大五角星中心的角度
          const angleToBigStar = Math.atan2(
            bigStarY - star.y,
            bigStarX - star.x
          );
          drawStar(
            ctx,
            star.x,
            star.y,
            smallStarRadius,
            angleToBigStar,
            "#ffde00"
          );
        });

        // 添加国旗边框
        ctx.strokeStyle = "#b31b00";
        ctx.lineWidth = 4;
        ctx.strokeRect(2, 2, width - 4, height - 4);
      }

      // 绘制五角星函数
      function drawStar(ctx, cx, cy, radius, rotation, color) {
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(rotation);
        ctx.fillStyle = color;

        ctx.beginPath();
        for (let i = 0; i < 5; i++) {
          // 外角点
          const outerAngle = (Math.PI * 2 * i) / 5 - Math.PI / 2;
          const outerX = Math.cos(outerAngle) * radius;
          const outerY = Math.sin(outerAngle) * radius;

          if (i === 0) {
            ctx.moveTo(outerX, outerY);
          } else {
            ctx.lineTo(outerX, outerY);
          }

          // 内角点
          const innerAngle = outerAngle + Math.PI / 5;
          const innerX = Math.cos(innerAngle) * (radius * 0.382);
          const innerY = Math.sin(innerAngle) * (radius * 0.382);

          ctx.lineTo(innerX, innerY);
        }

        ctx.closePath();
        ctx.fill();
        ctx.restore();
      }

      // 烟花效果
      function createFireworks() {
        const container = document.getElementById("fireworksContainer");
        const colors = [
          "#ff0000",
          "#ffde00",
          "#ffffff",
          "#ff8c00",
          "#00ff00",
          "#00ffff",
        ];

        function launchFirework() {
          // 随机位置发射
          const startX = Math.random() * window.innerWidth;
          const startY = window.innerHeight;
          const targetX = 100 + Math.random() * (window.innerWidth - 200);
          const targetY = 100 + Math.random() * (window.innerHeight / 2);

          // 创建发射点
          const rocket = document.createElement("div");
          rocket.className = "firework";
          rocket.style.left = startX + "px";
          rocket.style.top = startY + "px";
          rocket.style.backgroundColor =
            colors[Math.floor(Math.random() * colors.length)];
          container.appendChild(rocket);

          // 火箭上升动画
          const rocketAnimation = rocket.animate(
            [
              {
                transform: "translateY(0)",
                opacity: 1,
              },
              {
                transform: `translateY(-${startY - targetY}px)`,
                opacity: 1,
              },
            ],
            {
              duration: 1000,
              easing: "cubic-bezier(0.1, 0.8, 0.2, 1)",
            }
          );

          rocketAnimation.onfinish = () => {
            // 移除火箭
            container.removeChild(rocket);

            // 创建爆炸效果
            explodeFirework(targetX, targetY);

            // 偶尔显示祝福消息
            if (Math.random() < 0.3) {
              showRandomMessage(targetX, targetY);
            }
          };
        }

        function explodeFirework(x, y) {
          const particleCount = 80 + Math.floor(Math.random() * 50);
          const color = colors[Math.floor(Math.random() * colors.length)];

          for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement("div");
            particle.className = "firework";
            particle.style.left = x + "px";
            particle.style.top = y + "px";
            particle.style.backgroundColor = color;
            particle.style.boxShadow = `0 0 8px 2px ${color}`;
            container.appendChild(particle);

            const angle = (Math.PI * 2 * i) / particleCount;
            const distance = 50 + Math.random() * 150;
            const size = 2 + Math.random() * 4;
            const duration = 800 + Math.random() * 700;

            particle.style.width = size + "px";
            particle.style.height = size + "px";

            particle.animate(
              [
                {
                  transform: "translate(0, 0) scale(1)",
                  opacity: 1,
                },
                {
                  transform: `translate(${Math.cos(angle) * distance}px, ${
                    Math.sin(angle) * distance
                  }px) scale(0)`,
                  opacity: 0,
                },
              ],
              {
                duration: duration,
                easing: "cubic-bezier(0.1, 0.8, 0.2, 1)",
              }
            );

            // 移除粒子
            setTimeout(() => {
              if (particle.parentNode) {
                particle.parentNode.removeChild(particle);
              }
            }, duration);
          }

          // 添加爆炸声音效果（静默，避免自动播放问题）
          // 在实际项目中可以添加音效
        }

        function showRandomMessage(x, y) {
          const messages = [
            "国庆快乐！",
            "祖国万岁！",
            "繁荣昌盛！",
            "我爱你中国！",
            "节日快乐！",
          ];

          const message = document.createElement("div");
          message.className = "message";
          message.textContent =
            messages[Math.floor(Math.random() * messages.length)];
          message.style.left = x + "px";
          message.style.top = y + "px";

          document.body.appendChild(message);

          setTimeout(() => {
            if (message.parentNode) {
              message.parentNode.removeChild(message);
            }
          }, 3000);
        }

        // 定期发射烟花
        setInterval(launchFirework, 500);

        // 初始多发烟花
        for (let i = 0; i < 8; i++) {
          setTimeout(launchFirework, i * 200);
        }
      }

      // 页面加载完成后执行
      window.onload = function () {
        drawChinaFlag();
        createFireworks();

        // 添加点击事件，点击时可以重新绘制国旗
        document
          .getElementById("chinaFlag")
          .addEventListener("click", function () {
            drawChinaFlag();
          });

        // 添加窗口调整大小时的重绘
        window.addEventListener("resize", function () {
          drawChinaFlag();
        });

        // 添加键盘事件，按空格键可以触发额外烟花
        document.addEventListener("keydown", function (e) {
          if (e.code === "Space") {
            createFireworks();
          }
        });
      };

      // 添加控制台祝福
      console.log(
        `%c 
            ██████  ██ ██████  ███████ ██████  
            ██   ██ ██ ██   ██ ██      ██   ██ 
            ██████  ██ ██████  █████   ██████  
            ██      ██ ██   ██ ██      ██   ██ 
            ██      ██ ██   ██ ███████ ██   ██ 
            
            国庆快乐！祝福祖国繁荣昌盛！
            `,
        "color: #de2910; font-size: 16px; font-weight: bold; text-align: center;"
      );
    </script>
  </body>
</html>