Canvas绘图

丸子吖嘿
已于 2023-10-12 18:34:49 修改
阅读量83
点赞数
文章标签： css css3 前端
于 2023-10-12 18:32:59 首次发布
本文链接：https://blog.csdn.net/qq_29050279/article/details/133796890
版权
绘制烟花图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #fireworks {
      width: 600px;
      height: 400px;
      background-color: black;
    }

    svg[name="rabbit"] {
      position: absolute;
      top: -50px;
      left: -50px;
      transform: scale(-0.2, 0.2);
    }

    svg[name="spaceShip"] {
      position: absolute;
      top: 200px;
      left: 409px;
      transform: rotate(45deg) scale(0.6, 0.8);
    }
  </style>
</head>

<body>
  <canvas id="fireworks"></canvas>
  <svg name="rabbit" t="1695450405416" class="icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="1716" width="200" height="200">
    <path
      d="M840.8064 769.518933a52.701867 52.701867 0 0 1 23.278933-7.287466c52.804267 2.082133 49.3568 75.52-1.518933 78.7968-37.205333 2.4064-59.921067-44.2368-28.0064-67.601067a60.689067 60.689067 0 0 1 6.2464-3.908267z"
      fill="#FFFFFF" p-id="1717"></path>
    <path
      d="M863.351467 762.146133h0.7168c52.804267 2.082133 49.3568 75.52-1.518934 78.7968h-2.798933c-35.515733 0-56.32-44.9536-25.207467-67.6864a47.172267 47.172267 0 0 1 6.2464-3.925333 53.572267 53.572267 0 0 1 22.562134-7.287467m0-43.195733a93.986133 93.986133 0 0 0-43.281067 12.6464 116.360533 116.360533 0 0 0-11.042133 6.9632 77.7216 77.7216 0 0 0-28.8768 87.927467 83.473067 83.473067 0 0 0 79.598933 57.685333c1.8432 0 3.6864 0 5.597867-0.1536a83.933867 83.933867 0 0 0 80.008533-85.333333 79.854933 79.854933 0 0 0-79.598933-79.598934h-2.4064z"
      fill="#78A3AD" p-id="1718"></path>
    <path
      d="M607.6928 528.657067a75.4688 75.4688 0 0 0 21.0432 48.725333c11.434667 10.8032 23.364267 19.848533 34.133333 31.522133 30.8736 33.757867 82.312533 43.844267 114.875734 79.837867a211.165867 211.165867 0 0 1 46.08 85.845333 228.420267 228.420267 0 0 1 7.68 111.9232c-12.322133 50.6368-56.1664 58.487467-102.075734 67.447467a557.636267 557.636267 0 0 1-107.127466 9.6768c-22.801067 0-44.0832-19.438933-32.324267-44.168533 10.001067-21.0432 42.154667-9.437867 55.278933-25.6 3.84-4.642133 3.037867-15.991467 4.5568-21.76a72.2944 72.2944 0 0 1 10.888534-25.6c6.638933-8.8064 43.3664-25.6 28.398933-37.12-13.192533-10.24-45.687467 13.124267-50.6368 22.801066a121.9072 121.9072 0 0 0-6.826667 33.672534c-2.7136 13.124267-6.9632 14.318933-19.9168 18.4832-12.561067 4.078933-41.847467 6.5536-45.5168 22.186666-4.471467 18.875733 12.151467 35.84-4.232533 53.6064a67.447467 67.447467 0 0 1-56.32 18.773334c-7.5264-0.1536-28.074667-0.955733-33.1264-8.311467-4.4032-6.314667 0.802133-23.893333 1.604267-30.395733a53.896533 53.896533 0 0 0-10.717867-40.2432c-2.798933-3.515733-22.186667-23.671467-24.405333-10.9568a193.365333 193.365333 0 0 0-0.477867 48.554666c5.12 43.844267-69.205333 55.842133-87.7568 23.432534-7.594667-13.277867 3.2768-46.6432 2.952533-61.2864a554.069333 554.069333 0 0 0-9.6768-93.866667 262.826667 262.826667 0 0 0-10.871466-39.918933c-2.56-7.048533-16.247467-28.398933-13.994667-35.191467s8.96-6.4 14.318933-8.96a80.213333 80.213333 0 0 0 15.752534-12.407467c14.967467-12.885333 30.327467-25.275733 45.448533-37.8368q45.243733-37.802667 90.555733-75.52a186.5728 186.5728 0 0 0 36.642134-33.28c9.762133-14.2336 72.635733-99.9936 83.114666-52.6336 1.0752 6.2464 1.877333 12.407467 2.679467 18.568534z"
      fill="#78A3AD" p-id="1719"></path>
    <path
      d="M592.008533 496.162133c5.922133 0 10.564267 4.078933 12.8 14.165334 1.28 6.075733 2.082133 12.2368 2.884267 18.312533a75.4688 75.4688 0 0 0 21.0432 48.725333c11.434667 10.8032 23.364267 19.848533 34.133333 31.522134 30.8736 33.757867 82.312533 43.844267 114.875734 79.837866a211.165867 211.165867 0 0 1 46.08 85.845334 228.420267 228.420267 0 0 1 7.68 111.9232c-12.322133 50.6368-56.1664 58.487467-102.075734 67.447466a557.636267 557.636267 0 0 1-107.127466 9.6768c-22.801067 0-43.997867-19.438933-32.238934-44.151466 10.001067-21.0432 42.154667-9.437867 55.278934-25.6 3.84-4.642133 3.037867-15.991467 4.5568-21.76a72.2944 72.2944 0 0 1 10.888533-25.6c6.638933-8.8064 43.3664-25.6 28.398933-37.12a13.533867 13.533867 0 0 0-8.311466-2.56 66.2528 66.2528 0 0 0-42.325334 25.361066 121.9072 121.9072 0 0 0-6.826666 33.672534c-2.7136 13.124267-6.9632 14.318933-19.9168 18.4832-12.561067 4.078933-41.847467 6.5536-45.5168 22.186666-4.471467 18.875733 12.151467 35.84-4.232534 53.6064a64.187733 64.187733 0 0 1-52.002133 18.773334h-4.232533c-7.5264-0.1536-28.074667-0.955733-33.1264-8.328534-4.4032-6.314667 0.802133-23.893333 1.604266-30.395733a53.896533 53.896533 0 0 0-10.717866-40.2432c-2.082133-2.7136-13.994667-15.121067-20.48-15.121067-1.9968 0-3.413333 1.1264-3.9936 4.164267a193.365333 193.365333 0 0 0-0.477867 48.554667c3.208533 26.88-23.688533 41.847467-49.117867 41.847466a43.229867 43.229867 0 0 1-38.638933-18.397866c-7.594667-13.277867 3.2768-46.6432 2.952533-61.2864a554.069333 554.069333 0 0 0-9.6768-93.866667 262.826667 262.826667 0 0 0-10.871466-39.918933c-2.56-7.031467-16.247467-28.398933-13.994667-35.191467s8.96-6.4 14.318933-8.96a80.213333 80.213333 0 0 0 15.752534-12.407467c14.967467-12.885333 30.327467-25.275733 45.448533-37.8368q45.243733-37.802667 90.555733-75.52a186.5728 186.5728 0 0 0 36.642134-33.28c7.594667-11.127467 48.247467-66.56 70.2464-66.56m0-43.195733c-31.351467 0-66.952533 28.7232-105.915734 85.435733a99.601067 99.601067 0 0 1-17.7664 15.837867c-3.754667 2.884267-7.441067 5.768533-10.9568 8.721067l-90.794666 75.52c-5.12 4.232533-10.24 8.3968-15.2064 12.6464-10.24 8.533333-20.48 16.964267-30.72 25.6-1.8432 1.604267-3.601067 3.208533-5.358934 4.795733-0.477867 0.392533-0.955733 0.955733-1.4336 1.365333a52.514133 52.514133 0 0 0-36.232533 34.798934 75.093333 75.093333 0 0 0 12.2368 58.88l2.7136 5.12a219.938133 219.938133 0 0 1 8.721067 32.750933 513.194667 513.194667 0 0 1 8.874666 86.3232c0 1.604267-1.194667 8.004267-1.928533 12.2368a103.4752 103.4752 0 0 0 4.642133 69.768533 85.333333 85.333333 0 0 0 76.1344 40.0384 104.106667 104.106667 0 0 0 57.361067-16.7936 93.474133 93.474133 0 0 0 58.026667 16.247467h5.12a110.933333 110.933333 0 0 0 75.093333-24.32 83.0464 83.0464 0 0 0 37.2736 8.8064 601.1392 601.1392 0 0 0 115.438933-10.478933l1.706667-0.324267c48.725333-9.437867 115.524267-22.3232 134.161067-99.2768a272.0768 272.0768 0 0 0-8.004267-133.512533 252.945067 252.945067 0 0 0-55.671467-103.5264 250.88 250.88 0 0 0-70.638933-50.176 174.813867 174.813867 0 0 1-44.373333-29.678934 307.063467 307.063467 0 0 0-24.644267-23.364266c-3.925333-3.413333-7.765333-6.826667-11.605333-10.3936-3.037867-2.952533-5.8368-6.724267-7.918934-22.954667l-0.1536-1.041067c-0.802133-6.314667-1.706667-13.431467-3.413333-20.957866a56.541867 56.541867 0 0 0-54.954667-48.0768z"
      fill="#78A3AD" p-id="1720"></path>
    <path
      d="M607.675733 528.64a75.4688 75.4688 0 0 0 21.0432 48.725333c11.434667 10.8032 23.364267 19.848533 34.133334 31.522134 30.8736 33.757867 82.312533 43.844267 114.875733 79.837866a211.165867 211.165867 0 0 1 46.08 85.845334 228.420267 228.420267 0 0 1 7.5776 111.940266c-12.322133 50.6368-56.1664 58.487467-102.075733 67.447467a539.784533 539.784533 0 0 1-64.085334 8.2432 348.757333 348.757333 0 0 1-53.998933 2.440533c-15.035733-1.518933-18.005333-21.674667-13.994667-33.757866a35.84 35.84 0 0 1 28.8768-20.957867c5.8368-1.4336 12.0832 0 18.0736-1.1264a18.261333 18.261333 0 0 0 15.5136-20.48 87.3472 87.3472 0 0 1 11.605334-40.721067 63.5904 63.5904 0 0 1 13.038933-15.9232c5.12-4.795733 13.5168-11.434667 8.635733-19.285333-8.635733-13.653333-33.365333 0.1536-41.847466 6.485333a72.6016 72.6016 0 0 0-26.1632 39.765334c-5.512533 21.845333-10.001067 23.364267-30.242134 31.914666a46.865067 46.865067 0 0 0-27.118933 24.234667c-7.594667 18.312533 5.12 39.594667-14.08 53.128533-16.878933 11.844267-67.362133 17.442133-75.6736-8.072533-2.474667-7.594667 2.474667-16.247467 3.601067-23.1936a147.6608 147.6608 0 0 0 0.477866-50.312533 11.451733 11.451733 0 0 0-9.6768-9.6768 73.386667 73.386667 0 0 0-18.773333-1.041067 16.401067 16.401067 0 0 0-11.605333 4.232533c-2.952533 3.754667-1.518933 10.9568-1.604267 15.36 0 9.5232-0.1536 18.961067-0.477867 28.484267-0.802133 21.845333-3.2768 42.478933-26.3168 51.9168a59.221333 59.221333 0 0 1-50.551466-2.321067 33.604267 33.604267 0 0 1-12.0832-11.844266c-7.594667-13.277867 3.2768-46.6432 2.952533-61.2864a554.0864 554.0864 0 0 0-9.6768-93.866667 262.826667 262.826667 0 0 0-10.888533-39.918933c-2.56-7.031467-16.247467-28.398933-13.994667-35.191467s8.96-6.4 14.318933-8.96a80.298667 80.298667 0 0 0 15.752534-12.407467c14.967467-12.885333 30.327467-25.275733 45.431466-37.8368q45.243733-37.802667 90.555734-75.52a186.5728 186.5728 0 0 0 36.642133-33.28c9.762133-14.2336 72.635733-99.9936 83.114667-52.6336 1.058133 5.768533 1.826133 11.9296 2.628266 18.090667z"
      fill="#FFFFFF" p-id="1721"></path>
    <path
      d="M638.446933 434.158933a265.6768 265.6768 0 0 0 23.1936 89.992534 344.0128 344.0128 0 0 1 32.836267 94.549333c7.048533 43.912533 1.194667 90.641067-32.1536 122.3168a280.968533 280.968533 0 0 1-188.3136 72.3968c-3.413333 0-6.826667 0.1536-10.24 0.1536-89.838933 0-227.925333-31.675733-257.706667-127.197867a157.474133 157.474133 0 0 1 6.075734-97.604266c14.882133-33.518933 20.872533-75.195733 36.9664-111.752534a156.6208 156.6208 0 0 1 46.7968-64.7168c6.5536-4.727467 16.401067-8.635733 17.066666-17.7664a75.281067 75.281067 0 0 0-15.035733-34.133333c-40.157867-63.146667-96.648533-113.117867-146.158933-168.635733a147.131733 147.131733 0 0 1-22.3232-40.96 103.7312 103.7312 0 0 1-7.5264-42.871467 60.2624 60.2624 0 0 1 42.325333-53.111467 116.258133 116.258133 0 0 1 73.6768 2.7136 168.174933 168.174933 0 0 1 45.124267 23.04 335.069867 335.069867 0 0 1 105.045333 119.6032c26.1632 51.438933 30.0032 106.888533 42.154667 162.321067 2.474667 11.3664 5.12 14.318933 17.288533 14.318933 13.038933 0 26.231467 1.28 39.253333 1.706667a41.1136 41.1136 0 0 0 22.647467-2.884267c15.837867-9.5232 19.114667-41.847467 23.893333-58.1632 21.111467-72.328533 40.328533-167.1168 90.7264-226.4064a148.48 148.48 0 0 1 46.472534-36.4032 70.519467 70.519467 0 0 1 9.762133-3.9936 90.453333 90.453333 0 0 1 65.9968 0c33.4336 15.9232 33.1264 61.047467 27.4432 92.16-7.1168 38.9632-38.075733 94.72-57.4464 128.5632-17.9712 30.9248-77.568 124.0576-77.841067 162.7648z"
      fill="#FFFFFF" p-id="1722"></path>
    <path
      d="M715.997867 44.407467a71.099733 71.099733 0 0 1 30.088533 6.161066c33.4336 15.9232 33.1264 61.047467 27.4432 92.16-7.133867 38.946133-38.0928 94.754133-57.4464 128.546134-17.7664 30.958933-77.3632 124.074667-77.755733 162.798933a265.6768 265.6768 0 0 0 23.1936 89.992533 344.0128 344.0128 0 0 1 32.887466 94.5664c7.031467 43.912533 1.194667 90.641067-32.1536 122.3168a280.968533 280.968533 0 0 1-188.3136 72.3968c-3.413333 0-6.826667 0.1536-10.24 0.1536-89.838933 0-227.925333-31.675733-257.706666-127.197866a157.474133 157.474133 0 0 1 6.075733-97.604267c14.882133-33.518933 20.872533-75.195733 36.9664-111.752533a156.6208 156.6208 0 0 1 46.7968-64.7168c6.5536-4.727467 16.401067-8.635733 17.066667-17.7664a75.281067 75.281067 0 0 0-15.035734-34.133334c-40.157867-63.146667-96.648533-113.117867-146.158933-168.635733a147.131733 147.131733 0 0 1-22.3232-40.96 103.7312 103.7312 0 0 1-7.611733-42.9568 60.2624 60.2624 0 0 1 42.325333-53.111467 85.333333 85.333333 0 0 1 29.525333-4.881066 147.831467 147.831467 0 0 1 44.168534 7.594666 168.174933 168.174933 0 0 1 45.141333 23.0912 335.069867 335.069867 0 0 1 105.045333 119.6032c26.1632 51.438933 30.0032 106.871467 42.154667 162.321067 2.474667 11.3664 5.12 14.318933 17.288533 14.318933 13.038933 0 26.231467 1.28 39.253334 1.706667 2.645333 0.1536 5.444267 0.238933 8.2432 0.238933a27.579733 27.579733 0 0 0 14.404266-3.1232c15.837867-9.5232 19.114667-41.847467 23.893334-58.1632 21.077333-72.260267 40.311467-167.048533 90.709333-226.338133a148.48 148.48 0 0 1 46.421333-36.386133 70.536533 70.536533 0 0 1 9.762134-3.9936 115.438933 115.438933 0 0 1 35.84-6.2464m0-43.127467a155.306667 155.306667 0 0 0-49.8688 8.635733 114.688 114.688 0 0 0-14.967467 6.161067 191.522133 191.522133 0 0 0-60.074667 47.121067c-48.315733 56.8832-69.973333 135.8336-88.951466 205.602133-3.413333 12.6464-6.826667 24.951467-10.24 36.5568a211.626667 211.626667 0 0 0-3.84 15.598933c-0.887467 3.754667-2.082133 9.437867-3.413334 14.318934a365.3632 365.3632 0 0 1-10.564266-0.648534c-1.8432 0-3.6864-0.238933-5.512534-0.324266-1.518933-7.765333-2.884267-15.598933-4.317866-23.7568a449.450667 449.450667 0 0 0-37.546667-130.082134 378.112 378.112 0 0 0-118.801067-135.2704A214.4768 214.4768 0 0 0 251.136 16.401067a186.487467 186.487467 0 0 0-57.514667-9.6768 126.6688 126.6688 0 0 0-44.373333 7.5264 102.980267 102.980267 0 0 0-70.6048 93.525333 147.8144 147.8144 0 0 0 11.042133 59.921067l1.4336 3.2768a173.312 173.312 0 0 0 28.398934 49.442133c15.36 17.066667 31.112533 33.604267 46.404266 49.681067a749.550933 749.550933 0 0 1 95.573334 113.3568l0.324266 0.5632a205.602133 205.602133 0 0 0-52.3264 75.52 468.1728 468.1728 0 0 0-21.367466 63.914666 378.077867 378.077867 0 0 1-15.598934 47.786667 201.386667 201.386667 0 0 0-7.918933 128c38.877867 124.3136 206.2336 157.525333 299.042133 157.525333 4.078933 0 8.004267 0 11.844267-0.238933a320.853333 320.853333 0 0 0 216.558933-84.155733c39.68-37.546667 55.688533-94.5664 45.038934-160.426667a389.751467 389.751467 0 0 0-36.642134-106.632533 232.430933 232.430933 0 0 1-18.875733-70.5536c0.631467-15.035733 21.282133-56.558933 61.201067-123.511467 4.317867-7.287467 8.004267-13.448533 10.8032-18.244267 24.951467-43.3664 54.613333-98.7136 62.481066-142.318933 12.322133-66.952533-6.485333-117.6064-51.3536-138.888533a111.394133 111.394133 0 0 0-48.708266-10.513067z"
      fill="#78A3AD" p-id="1723"></path>
    <path
      d="M330.564267 580.642133a40.3968 40.3968 0 1 0 34.133333 40.072534 37.358933 37.358933 0 0 0-34.133333-40.072534z"
      fill="#2F2F2F" p-id="1724"></path>
    <path
      d="M559.274667 580.642133a40.379733 40.379733 0 1 0 34.474666 39.68 37.307733 37.307733 0 0 0-34.474666-39.68z"
      fill="#2F2F2F" p-id="1725"></path>
    <path
      d="M528.401067 730.794667c-11.758933-6.007467-23.1936 12.8-34.321067 12.8a60.552533 60.552533 0 0 1-13.653333-1.8432c-5.8368-1.194667-10.888533-2.4064-12.6464-8.635734a55.364267 55.364267 0 0 1-0.802134-7.594666 54.357333 54.357333 0 0 1-0.887466-6.161067 35.720533 35.720533 0 0 0 14.08-8.721067c4.232533-4.4032 11.844267-10.9568 11.844266-17.681066a8.362667 8.362667 0 0 0-6.485333-9.198934 15.2576 15.2576 0 0 0-11.127467 4.4032 44.373333 44.373333 0 0 1-29.2864 8.533334 30.9248 30.9248 0 0 1-19.114666-8.721067c-2.56-2.235733-4.9664-4.727467-7.68-4.9664a5.393067 5.393067 0 0 0-4.727467 2.235733c-11.195733 12.151467 3.1232 25.6 14.08 30.1568 3.925333 1.706667 7.287467 3.515733 10.9568 4.881067 0 5.597867 0 11.195733-0.1536 12.2368-0.5632 7.202133-8.157867 10.871467-14.882133 12.561067a33.706667 33.706667 0 0 1-19.0464-1.8432 37.768533 37.768533 0 0 1-11.605334-10.632534 9.250133 9.250133 0 0 0-11.195733-2.952533c-10.3936 2.56-8.874667 10.717867-5.512533 18.961067 3.515733 8.8064 11.281067 12.168533 19.2 16.4864a49.6128 49.6128 0 0 0 28.484266 4.232533 55.569067 55.569067 0 0 0 14.404267-2.952533c7.68-2.7136 13.277867-11.946667 21.367467-5.751467a60.740267 60.740267 0 0 0 42.8032 5.8368c8.704-1.5872 41.8304-27.579733 25.9072-35.669333z"
      fill="#2F2F2F" p-id="1726"></path>
    <path
      d="M694.237867 111.428267a68.625067 68.625067 0 0 0-34.4064 20.002133 200.721067 200.721067 0 0 0-33.365334 57.514667c-12.2368 28.552533-30.242133 79.121067-40.004266 108.561066-4.5568 13.755733-8.96 27.306667-12.9536 41.352534a174.779733 174.779733 0 0 0-9.437867 41.6768c-0.238933 7.202133 1.604267 9.5232 8.3968 12.407466a93.866667 93.866667 0 0 0 23.125333 8.2432c4.4032 0.5632 6.007467 0.392533 8.3968-2.798933 1.9968-2.798933 3.515733-6.9632 5.751467-10.0864a432.145067 432.145067 0 0 0 23.125333-46.882133c9.437867-17.834667 19.7632-35.191467 29.013334-53.111467 12.885333-24.8832 35.84-69.768533 46.967466-95.573333 7.287467-16.964267 25.6-61.44 7.1168-76.8a26.077867 26.077867 0 0 0-21.725866-4.5056z"
      fill="#D7598B" p-id="1727"></path>
    <path
      d="M386.4064 377.6c13.755733-8.533333-1.1264-40.004267-4.5568-51.2a531.831467 531.831467 0 0 0-32.1536-75.093333c-26.3168-53.435733-61.047467-106.9568-113.527467-137.847467a37.956267 37.956267 0 0 0-30.5664-7.338667 24.661333 24.661333 0 0 0-21.111466 29.013334c2.321067 36.317867 50.875733 70.9632 72.635733 96.887466a796.296533 796.296533 0 0 1 50.244267 67.6864c13.3632 19.7632 24.234667 41.1136 35.601066 62.1568 3.1232 5.751467 7.918933 20.48 14.7968 23.1936a51.694933 51.694933 0 0 0 28.637867-7.458133z"
      fill="#D7598B" p-id="1728"></path>
  </svg>
  <svg name="spaceShip" t="1695451003441" class="icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="23051" width="200" height="200">
    <path
      d="M464 736v144a32 32 0 0 1-32 32h-112a32 32 0 0 1-32-32v-64c0-129.28 176-168.96 176-80zM736 800v64c0 33.6-14.4 48-32 48h-112a32 32 0 0 1-32-32c0-150.88-4.8-159.04 14.08-177.92C616.32 659.84 736 716.96 736 800z"
      fill="#FFE5C0" p-id="23052"></path>
    <path d="M560 848h176v64H560zM288 848h176v64H288z" fill="#68539B" p-id="23053"></path>
    <path
      d="M472 94.88A238.88 238.88 0 0 1 608 310.4a423.36 423.36 0 0 0 156.48 328.64C870.4 725.6 864 728.16 864 848h80c0-64 7.68-122.08-50.72-169.12-61.28-49.76-118.72-91.04-164.16-186.4A424.64 424.64 0 0 1 688 310.4 240 240 0 0 0 512 80a238.88 238.88 0 0 0-40 14.88z"
      fill="#FFE5C0" p-id="23054"></path>
    <path
      d="M80 848h208v-48c0-103.36 176-157.28 176-64a240 240 0 0 1 47.04-144A237.92 237.92 0 0 1 560 736c0-89.44 176-48.96 176 80v32h128c0-64 7.68-122.08-50.72-169.12-61.28-49.76-118.72-91.04-164.16-186.4A424.64 424.64 0 0 1 608 310.4a238.88 238.88 0 0 0-136-215.52A240 240 0 0 0 336 310.4a423.04 423.04 0 0 1-156.48 328.64C73.6 725.6 80 728.16 80 848z"
      fill="#FEF5E3" p-id="23055"></path>
    <path d="M80 784h208v64H80zM736 784h208v64H736z" fill="#68539B" p-id="23056"></path>
    <path d="M560 733.92V896a48 48 0 0 1-96 0c0-153.76-12.48-224 48.96-304A236.96 236.96 0 0 1 560 733.92z"
      fill="#898EC9" p-id="23057"></path>
    <path
      d="M624 336c0 1.6 6.08 0-224 0a105.28 105.28 0 0 1 23.2-65.92C446.4 240 476.16 234.24 512 224c46.56 13.28 36.48 11.04 38.08 11.04A105.76 105.76 0 0 1 624 336z"
      fill="#2DE0C7" p-id="23058"></path>
    <path
      d="M498.24 336h-36.96l-38.08-65.92A96 96 0 0 1 448 247.84zM608.96 336h-73.92l-58.72-101.76c1.6 0 19.52-5.44 36.32-10.24 34.72 9.92 36.32 10.24 37.92 11.04s-0.48-1.28 58.4 100.96z"
      fill="#93E6D9" p-id="23059"></path>
    <path d="M591.04 118.4a96 96 0 0 1-158.08 0A234.4 234.4 0 0 1 512 80a232.96 232.96 0 0 1 79.04 38.4z" fill="#68539B"
      p-id="23060"></path>
    <path
      d="M220.48 576.96A407.04 407.04 0 0 0 320 310.4a256 256 0 0 1 109.44-209.12A16 16 0 0 1 446.72 128 224 224 0 0 0 352 310.4a437.92 437.92 0 0 1-107.52 288 16 16 0 0 1-24-21.44zM288 864H80a16 16 0 0 1-16-16c0-68.48-7.68-129.6 56.64-181.6C176 621.92 172.8 624 176 620.64a16 16 0 0 1 21.76 23.36c-4.16 3.84 0.96 0-57.44 48C88.96 733.12 96 786.24 96 832h176v-16c0-114.56 128-171.2 181.6-131.84a256 256 0 0 1 46.72-101.92 16 16 0 0 1 26.56 1.44 253.76 253.76 0 0 1 44 100.16 89.44 89.44 0 0 1 75.04-6.72 16 16 0 0 1-3.68 32c-6.4 0-38.72-13.44-56.8 4.8A32 32 0 0 0 576 736a16 16 0 0 1-16 16c-32 0 1.6-49.12-48-131.52A226.56 226.56 0 0 0 480 736a16 16 0 0 1-32 0c0-65.6-144-27.52-144 80v32a16 16 0 0 1-16 16zM944 864H736c-39.36 0 14.4-72.32-48.96-129.28a16 16 0 0 1 21.44-23.68C756.16 753.92 752 794.56 752 832h176c0-99.36 4.48-100.48-93.6-180.64A436.64 436.64 0 0 1 672 310.4 224 224 0 0 0 512 96c-4.16 1.12-8.32 2.56-12.32 4a16 16 0 0 1-10.88-30.08A56.48 56.48 0 0 1 516.16 64 256 256 0 0 1 704 310.4a405.28 405.28 0 0 0 150.56 316.16l48.8 40C969.28 720 960 787.52 960 848a16 16 0 0 1-16 16z"
      fill="#35214C" p-id="23061"></path>
    <path
      d="M320 624V304a16 16 0 0 1 32 0v320a16 16 0 0 1-32 0zM672 624V304a16 16 0 0 1 32 0v320a16 16 0 0 1-32 0zM432 928h-48a16 16 0 0 1 0-32h48a16 16 0 0 0 16-16v-144c0-62.72-144-29.76-144 80v64a16 16 0 0 0 16 16 16 16 0 0 1 16 16c0 30.56-64 16-64-32v-64c0-149.12 208-193.12 208-80v144a48 48 0 0 1-48 48zM704 928h-112a48 48 0 0 1-48-48c0-147.2-6.24-164.16 18.72-189.28 22.08-22.08 52.48-22.08 83.2-13.6a16 16 0 1 1-8.16 30.88c-17.92-4.96-39.2-7.68-52.32 5.44S576 723.68 576 880a16 16 0 0 0 16 16h112c21.76 0 16-48 16-96a92.16 92.16 0 0 0-32.96-65.28 16 16 0 0 1 21.44-23.68C760.64 757.92 752 801.6 752 864c0 48-24.8 64-48 64z"
      fill="#35214C" p-id="23062"></path>
    <path
      d="M512 960a64 64 0 0 1-64-64c0-149.92-13.12-228.16 52.32-313.76a16 16 0 0 1 26.56 1.44A256 256 0 0 1 576 733.92V896a64 64 0 0 1-64 64z m0-339.52c-42.56 69.76-32 121.76-32 275.52a32 32 0 0 0 64 0c0-167.2 8.32-208-31.2-275.52zM624 352h-128a16 16 0 0 1 0-32h110.56a90.72 90.72 0 0 0-64-70.72L512 240c-32.8 9.28-57.12 12.8-78.4 41.12A88.32 88.32 0 0 0 417.44 320H432a16 16 0 0 1 0 32h-32a16 16 0 0 1-16-16 121.92 121.92 0 0 1 88.48-117.28c49.28-13.92 31.2-13.92 79.2 0A122.72 122.72 0 0 1 640 336a16 16 0 0 1-16 16zM419.84 128a16 16 0 0 1 3.68-22.08l5.92-4.16a16 16 0 0 1 24.16 17.28 80 80 0 0 0 113.92 3.04A219.52 219.52 0 0 0 512 96c-4.16 1.12-8.32 2.56-12.32 4a16 16 0 0 1-10.88-30.08A56.48 56.48 0 0 1 516.16 64a249.92 249.92 0 0 1 84.48 41.6 16 16 0 0 1 3.52 22.4 112 112 0 0 1-184.32 0zM880 800h-144a16 16 0 0 1 0-32h144a16 16 0 0 1 0 32zM288 800H144a16 16 0 0 1 0-32h144a16 16 0 0 1 0 32z"
      fill="#35214C" p-id="23063"></path>
    <path d="M464 864h-112a16 16 0 0 1 0-32h112a16 16 0 0 1 0 32zM688 864h-112a16 16 0 0 1 0-32h112a16 16 0 0 1 0 32z"
      fill="#35214C" p-id="23064"></path>
  </svg>
  <script>
    // 获取Canvas元素和上下文
    const canvas = document.getElementById('fireworks');
    // 设置Canvas尺寸
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const starts = [];
    const numStars = 200;
    for (let i = 0; i < numStars; i++) {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      starts[i] = { x, y };
    }
    const ctx = canvas.getContext('2d');

    // 定义烟花粒子对象
    class Particle {
      constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = Math.random() * 3 + 1;
        this.vx = Math.random() * 2 - 1;
        this.vy = Math.random() * 2 - 1;
        this.alpha = 1;
      }
      // 更新粒子位置和透明度
      update() {
        this.x += this.vx;
        this.y += this.vy;
        this.alpha -= 0.01;
      }
      // 绘制粒子
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        // ctx.globalAlpha = this.alpha;
        ctx.fill();
      }
    }
    // 存储烟花粒子的数组
    let particles = [];
    // 创建烟花爆炸效果
    function createFirework(x, y) {
      const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];

      for (let i = 0; i < 50; i++) {
        const particle = new Particle(x, y, colors[Math.floor(Math.random() * colors.length)]);
        particles.push(particle);
      }
    }
    // 绘制月亮
    function drawMoon() {
      ctx.beginPath();
      ctx.arc(100, 100, 80, 0, Math.PI * 2);
      ctx.fillStyle = '#ffff00';
      ctx.shadowColor = '#ffff00';
      ctx.shadowBlur = 10;
      ctx.fill();
    }
    // 绘制星星
    function drawStars() {
      for (let i = 0; i < numStars; i++) {
        const x = starts[i].x;
        const y = starts[i].y;
        const size = Math.random() * 2 + 1;

        ctx.beginPath();
        ctx.arc(x, y, size, 0, Math.PI * 2);
        ctx.fillStyle = '#ffffff';
        ctx.shadowColor = '#ffffff';
        ctx.shadowBlur = 5;
        ctx.fill();
      }
    }

    // 绘制行书文字
    function drawCalligraphy() {
      ctx.font = "bold 60px Arial"; // 设置字体样式和大小
      ctx.fillStyle = "cyan"; // 设置字体颜色
      ctx.textAlign = "center"; // 设置文本水平对齐方式
      ctx.fillText("但愿人长久", canvas.width / 2 - 250, canvas.height / 2 + 200); // 绘制文本
      ctx.fillText("千里共婵娟", canvas.width / 2 - 250, canvas.height / 2 + 300); // 绘制文本
    }

    // 绘制画面
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawMoon();
      drawStars();
      drawCalligraphy();
      for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();

        if (particles[i].alpha <= 0) {
          particles.splice(i, 1);
          i--;
        }
      }
      requestAnimationFrame(draw);
    }

    setInterval(() => {
      const count = ~~(Math.random() * 20 + 5);
      for (let index = 0; index < count; index++) {
        createFirework(Math.random() * 3000, Math.random() * 800 - 400);
      }
    }, 1000)

    // 开始绘制画面
    draw();
  </script>
</body>

</html>