在圣诞及元旦的日子里如何用html代码画一个爱心树

醉心编码

已于 2022-12-28 11:23:53 修改

阅读量1.3k

点赞数 2

分类专栏：技术类文章标签：节日

于 2022-12-27 10:27:02 首次发布

本文链接：https://blog.csdn.net/lzyzuixin/article/details/128452508

版权

技术类专栏收录该内容

283 篇文章 5 订阅

订阅专栏

一、前言

在圣诞节以及元旦节日来临的日子里，如果能亲自为自己所爱的人画一个爱心树，这肯定是个很浪漫的事。那么如何用代码画出圣诞树呢？用我的办法就能很简单的实现，复制-粘贴-另存就可完成。

二、创意名

绚丽多彩的爱心树

三、效果展示

四、实现步骤

一:将html的代码复制

具体见后面的代码

二：打开UltraEdit记事本，将代码复制到记事本中

三、另存为love.html

四、用浏览器打开love.html

五、编码实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>爱心树表白动画</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #fafafa;
        font-size: 14px;
        font-family: "微软雅黑", "宋体", sans-serif;
        color: #231f20;
        overflow: auto;
      }
      a {
        color: #000;
        font-size: 14px;
      }
      #main {
        width: 100%;
      }
      #wrap {
        position: relative;
        margin: 0 auto;
        width: 1100px;
        height: 680px;
        margin-top: 10px;
      }
      #text {
        width: 400px;
        height: 425px;
        left: 60px;
        top: 80px;
        position: absolute;
      }
      #code {
        display: none;
        font-size: 16px;
      }
      #clock-box {
        position: absolute;
        left: 60px;
        top: 550px;
        font-size: 28px;
        display: none;
      }
      #clock-box a {
        font-size: 28px;
        text-decoration: none;
      }
      #clock {
        margin-left: 48px;
      }
      #clock .digit {
        font-size: 64px;
      }
      #canvas {
        margin: 0 auto;
        width: 1100px;
        height: 680px;
      }
      #error {
        margin: 0 auto;
        text-align: center;
        margin-top: 60px;
        display: none;
      }
      .hand {
        cursor: pointer;
      }
      .say {
        margin-left: 5px;
      }
      .space {
        margin-right: 150px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="error">
        抱歉！目前您的浏览器无法显示，请更新至最新版本或使用其他主流浏览器，谢谢合作。
      </div>
      <div id="wrap">
        <canvas id="canvas" width="1100" height="680"></canvas>
      </div>
    </div>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-parser.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-jit.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-builderbase.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-async.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/jscex-async-powerpack.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/functions.js"
      charset="utf-8"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn-static-devbit.csdn.net/devbit-static/code/love-tree/js/love.js"
      charset="utf-8"
    ></script>
    <script>
      (function () {
        var canvas = $("#canvas");
        if (!canvas[0].getContext) {
          $("#error").show();
          return false;
        }

        var width = canvas.width();
        var height = canvas.height();
        canvas.attr("width", width);
        canvas.attr("height", height);
        var opts = {
          seed: {
            x: width / 2 - 20,
            color: "rgb(190, 26, 37)",
            scale: 2
          },
          branch: [
            [
              535,
              680,
              570,
              250,
              500,
              200,
              30,
              100,
              [
                [
                  540,
                  500,
                  455,
                  417,
                  340,
                  400,
                  13,
                  100,
                  [[450, 435, 434, 430, 394, 395, 2, 40]]
                ],
                [
                  550,
                  445,
                  600,
                  356,
                  680,
                  345,
                  12,
                  100,
                  [[578, 400, 648, 409, 661, 426, 3, 80]]
                ],
                [539, 281, 537, 248, 534, 217, 3, 40],
                [
                  546,
                  397,
                  413,
                  247,
                  328,
                  244,
                  9,
                  80,
                  [
                    [427, 286, 383, 253, 371, 205, 2, 40],
                    [498, 345, 435, 315, 395, 330, 4, 60]
                  ]
                ],
                [
                  546,
                  357,
                  608,
                  252,
                  678,
                  221,
                  6,
                  100,
                  [[590, 293, 646, 277, 648, 271, 2, 80]]
                ]
              ]
            ]
          ],
          bloom: {
            num: 700,
            width: 1080,
            height: 650
          },
          footer: {
            width: 1200,
            height: 5,
            speed: 10
          }
        };

        var tree = new Tree(canvas[0], width, height, opts);
        var seed = tree.seed;
        var foot = tree.footer;
        var hold = 1;

        canvas
          .click(function (e) {
            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            if (seed.hover(x, y)) {
              hold = 0;
              canvas.unbind("click");
              canvas.unbind("mousemove");
              canvas.removeClass("hand");
            }
          })
          .mousemove(function (e) {
            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            canvas.toggleClass("hand", seed.hover(x, y));
          });

        var seedAnimate = eval(
          Jscex.compile("async", function () {
            seed.draw();
            while (hold) {
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canScale()) {
              seed.scale(0.95);
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canMove()) {
              seed.move(0, 2);
              foot.draw();
              $await(Jscex.Async.sleep(10));
            }
          })
        );

        var growAnimate = eval(
          Jscex.compile("async", function () {
            do {
              tree.grow();
              $await(Jscex.Async.sleep(10));
            } while (tree.canGrow());
          })
        );

        var flowAnimate = eval(
          Jscex.compile("async", function () {
            do {
              tree.flower(2);
              $await(Jscex.Async.sleep(10));
            } while (tree.canFlower());
          })
        );

        var moveAnimate = eval(
          Jscex.compile("async", function () {
            tree.snapshot("p1", 240, 0, 610, 680);
            canvas
              .parent()
              .css("background", "url(" + tree.toDataURL("image/png") + ")");
            canvas.css("background", "#fafafa");
            $await(Jscex.Async.sleep(300));
            canvas.css("background", "none");
          })
        );

        var jumpAnimate = eval(
          Jscex.compile("async", function () {
            var ctx = tree.ctx;
            while (true) {
              tree.ctx.clearRect(0, 0, width, height);
              tree.jump();
              foot.draw();
              $await(Jscex.Async.sleep(25));
            }
          })
        );

        var textAnimate = eval(
          Jscex.compile("async", function () {
            var together = new Date();
            together.setFullYear(2010, 1, 15); //时间年月日
            together.setHours(16); //小时
            together.setMinutes(53); //分钟
            together.setSeconds(0); //秒前一位
            together.setMilliseconds(2); //秒第二位

            $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
              timeElapse(together);
              $await(Jscex.Async.sleep(1000));
            }
          })
        );

        var runAsync = eval(
          Jscex.compile("async", function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());
            $await(jumpAnimate());
          })
        );

        runAsync().start();
      })();
    </script>
  </body>
</html>

提醒：在发布作品前请把不用的内容删掉

醉心编码

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
在圣诞及元旦的日子里如何用html代码画一个爱心树

在圣诞节以及元旦节日来临的日子里，如果能亲自为自己所爱的人画一个爱心树，这肯定是个很浪漫的事。那么如何用代码画出圣诞树呢？用我的办法就能很简单的实现，复制-粘贴-另存就可完成。
复制链接

扫一扫