使用html画出圣诞树

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "/TR/html4/frameset.dtd"><html><head><title>html5写的3D逼真圣诞树效果</title><meta charset="utf-8" /><style>

xiaokuangren_

4103人浏览 · 2021-12-19 21:55:08

xiaokuangren_ · 2021-12-19 21:55:08 发布

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "/TR/html4/frameset.dtd">
<html>
  <head>
    <title>html5写的3D逼真圣诞树效果</title>
    <meta charset="utf-8" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background-color: black;
      }
      p {
        margin: 0;
        padding: 0;
        border: 0;
      }
      .nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 27px;
        background-color: white;
        color: black;
        text-align: center;
        line-height: 25px;
      }

      a {
        color: black;
        text-decoration: none;
        border-bottom: 1px dashed black;
      }
      a:hover {
        border-bottom: 1px solid red;
      }

      .previous {
        float: left;
        margin-left: 10px;
      }
      .next {
        float: right;
        margin-right: 10px;
      }

      .green {
        color: green;
      }
      .red {
        color: red;
      }

      textarea {
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        padding-bottom: 20px;
      }
      .block-outer {
        float: left;
        width: 22%;
        height: 100%;
        padding: 5px;
        border-left: 1px solid black;
        margin: 30px 3px 3px 3px;
      }
      .block-inner {
        height: 68%;
      }
      .one {
        border: 0;
      }
    </style>
  </head>
  <body style="text-align: center">
    <canvas id="c" style="margin-top: 200px" height="356" width="446"></canvas>

    <script>
      var collapsed = true;
      function toggle() {
        var fs = top.document.getElementsByTagName("frameset")[0];
        var f = fs.getElementsByTagName("frame");
        if (collapsed) {
          fs.rows = "250px,*";
          // enable resizing of frames in firefox/opera
          fs.noResize = false;
          f[0].noResize = false;
          f[1].noResize = false;
        } else {
          fs.rows = "30px,*";
          // disable resizing of frames in firefox/opera
          fs.noResize = true;
          f[0].noResize = true;
          f[1].noResize = true;
        }
        collapsed = !collapsed;
      }
    </script>
    <script>
      var b = document.body;
      var c = document.getElementsByTagName("canvas")[0];
      var a = c.getContext("2d");
      document.body.clientWidth; // fix bug in chrome.
    </script>
    <script>
      // start of submission //
      M = Math;
      Q = M.random;
      J = [];
      U = 16;
      T = M.sin;
      E = M.sqrt;
      for (O = k = 0; (x = z = j = i = k < 200); )
        with ((M[k] = k ? c.cloneNode(0) : c)) {
          width = height = k ? 32 : (W = 446);
          with (getContext("2d"))
            if ((k > 10) | !k)
              for (
                font = "60px Impact", V = "rgba(";
                (I = i * U),
                  (fillStyle = k
                    ? k == 13
                      ? V + "205,205,215,.15)"
                      : V +
                        (147 + I) +
                        "," +
                        (k % 2 ? 128 + I : 0) +
                        "," +
                        I +
                        ",.5)"
                    : "#cca"),
                  i < 7;

              )
                beginPath(
                  fill(
                    arc(
                      U - i / 3,
                      24 - i / 2,
                      k == 13 ? 4 - i++ / 2 : 8 - i++,
                      0,
                      M.PI * 2,
                      1
                    )
                  )
                );
            else
              for (
                ;
                (x = T(i)),
                  (y = Q() * 2 - 1),
                  (D = x * x + y * y),
                  (B = E(D - x / 0.9 - 1.5 * y + 1)),
                  (R = (67 * (B + 1) * (L = k / 9 + 0.8)) >> 1),
                  i++ < W;

              )
                if (D < 1)
                  beginPath(
                    (strokeStyle = V + R + "," + ((R + B * L) >> 0) + ",40,.1)")
                  ),
                    moveTo(U + x * 8, U + y * 8),
                    lineTo(U + x * U, U + y * U),
                    stroke();
          for (y = H = k + E(k++) * 25, R = Q() * W; (P = 3), j < H; )
            J[O++] = [
              (x += T(R) * P + Q() * 6 - 3),
              (y += Q() * U - 8),
              (z += T(R - 11) * P + Q() * 6 - 3),
              ((j / H) * 20 +
                (((j += U) > H) & (Q() > 0.8) ? Q((P = 9)) * 4 : 0)) >>
                1,
            ];
        }
      setInterval(function G(m, l) {
        A = T(D - 11);
        if (l) return (m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
        a.clearRect(0, 0, W, W);
        J.sort(G);
        for (
          i = 0;
          (L = J[i++]);
          a.drawImage(
            M[L[3] + 1],
            (207 + L[0] * A + L[2] * T(D)) >> 0,
            L[1] >> 1
          )
        ) {
          if (i == 2e3) a.fillText("Merry Christmas!", U, 345);
          if (!(i % 7))
            a.drawImage(
              M[13],
              (157 * (i * i) + T(D * 5 + i * i) * 5) % W >> 0,
              (113 * i + (D * i) / 60) % (290 + i / 99) >> 0
            );
        }
        D += 0.02;
      }, 1);
      // end of submission //
    </script>
  </body>
</html>