圣诞来了，你们的圣诞树准备好了吗！！！

DanCheOo
2,213 阅读3分钟

前言

    Single dog, Single dog, Single all the day。随着音乐的响起，我又单了一年， 回想上次谈恋爱还是在上次。 不知不觉 2021 已经落入尾声了，今天已经是 24 号了， 你们的圣诞树准备好了吗？今晚你们有人陪吗？ 有人给你穿圣诞套装吗？ 噗，醒醒， 你没对象。作为一个 Single dog + 卑微底层前端， 我们要自觉， 别人圣诞节恩恩爱爱， 我们就自己动手画个 圣诞树， 然后再发给plmm， 这样我们的爱情不就来了吗！！！

一、准备好你的开发神器

   第一步，打开你的神器 Vscode， 然后新建一个 html 页面， 输入你的 !, 好了结束， 接下来就 C + V 了。哈哈哈哈嗝没错就是 CV， 一位合格的光头强，就应该会逛各种论坛， copy别人的代码， 没错我也是！！！前两天在问了下小掘， “前端的圣诞礼物”， 好家伙就给我跳出来一大堆， 但是我在里面搜了搜看了看， emmmm， 还是我来动手（拼装）吧。    准备工作做好了后，新建一个空白页面， 然后用canvas画出一颗圣诞树, 不多 BB， 直接上代码。

<ul class="ones">
      <li class="sphere"></li>
      <p class="text">滴~圣诞快乐</p>
    </ul>
    <ul class="twos">
      <li class="top-star"> </li>
      <li class="top">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="middle first">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="middle second">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="middle third">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="bottom outer">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="stem">
        <ul class="tree-stem">
          <li class="stem"></li>
          <li class="gift g1"></li>
          <li class="gift g2"></li>
          <li class="gift g3"></li>
          <li class="gift g4"></li>
          <li class="gift g5"></li>
          <li class="gift g6"></li>
          <li class="gift g7"></li>
          <li class="gift g8"></li>
          <li class="gift g9"></li>
          <li class="shadow"></li>
        </ul>
      </li>
    </ul>
    <ul class="thirds">
      <li class="star"></li>
      <li class="ball b1"></li>
      <li class="ball b2"></li>
      <li class="ball b3"></li>
      <li class="ball b4"></li>
      <li class="ball b5"></li>
      <li class="ball b6"></li>
      <li class="ball b7"></li>
      <li class="ball b8"></li>
      <li class="ball b9"></li>
      <li class="ball b10"></li>
      <li class="ball b11"></li>
      <li class="ball b12"></li>
      <li class="ball b13"></li>
      <li class="ball b14"></li>
      <li class="ball b15"></li>
      <li class="ball b16"></li>
      <li class="ball b17"></li>
      <li class="ball b18"></li>
      <li class="ball b19"></li>
      <li class="ball b20"></li>
      <li class="light l1"></li>
      <li class="light l2"></li>
      <li class="light l3"></li>
      <li class="light l4"></li>
      <li class="light l5"></li>
      <li class="light l6"></li>
      <li class="light l7"></li>
      <li class="light l8"></li>
      <li class="light l9"></li>
      <li class="light l10"></li>
      <li class="light l11"></li>
      <li class="light l12"></li>
      <li class="light l13"></li>
      <li class="light l14"></li>
      <li class="light l15"></li>
      <li class="light l16"></li>
      <li class="light l17"></li>
      <li class="light l18"></li>
      <li class="light l19"></li>
      <li class="light l20"></li>
      <li class="light l21"></li>
      <li class="light l22"></li>
      <li class="light l23"></li>
      <li class="light l24"></li>
      <li class="light l25"></li>
    </ul>

麻了麻了，我第一眼看到这个代码时就麻了， 真的是用全装 html 画了一颗圣诞树啊， 给我的话， 我就一张图片解决了哈哈哈嗝，有木有啊
Okkkk， html完了再上css

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #020024;
    }
    此处省略一千行...

Emmmm， 真的我是真的佩服写出这颗圣诞树的原创作者， 是真的666， css我是真的省略了一千行， 当然，css既然省略了， 那为什么html复制这么多，单纯！, 当然是为了水字数啊哈哈哈哈哈嗝麻麻的。好的圣诞树画完了，我们看下效果！

image.png

二、加点雪花

Emmm， 不戳不戳， 树画完了，我弄完的时候发现就一棵树有点单一， 然后我就弄了个雪花， 我们再装饰一下， 加点雪花, 来， 上雪花代码

const canvas = document.querySelector("#snow")
const W = canvas.clientWidth
const H = canvas.clientHeight

// 设置canvas画布大小
canvas.setAttribute("width", W)
canvas.setAttribute("height", H)

const ctx = canvas.getContext("2d")

const config = {
        number: 200,
        snowArr: [],
        pic: "https://www.deanhan.cn/wp-content/uploads/2017/12/snow.png",
        speed: 0
}
let snowImg = new Image()
snowImg.src = config.pic

for (let i = 0; i < config.number; i++) {
        config.snowArr.push({
                x: Math.random() * W,
                y: Math.random() * H,
                toX: Math.random(),
                toY: Math.random() * 1 + 1,
                size: Math.random() * 20 + 5
        })
}
console.log(config)
const dropAnimation = () => {
        ctx.clearRect(0, 0, W, H)
        for (let i = 0; i < config.snowArr.length; i++) {
                let snow = config.snowArr[i]
                // ctx.beginPath()
                // ctx.arc(snow.x, snow.y, snow.size, 0, Math.PI * 2, true)
                // ctx.fillStyle = "#666"
                // ctx.fill()
                ctx.drawImage(snowImg, snow.x, snow.y, snow.size, snow.size)

                snow.x = snow.x > W ? 0 : snow.x + snow.toX
                snow.y = snow.y > H ? 0 : snow.y + snow.toY
        }
        requestAnimationFrame(dropAnimation)
}
requestAnimationFrame(dropAnimation)

Okkk，雪花长这个样啦！

image.png 哈哈哈嗝虽然我是白嫖复制怪， 但是我也优化了一下， 呜呜呜没有功劳也有苦劳吧， 所以加上了我的标签 @DanCheO，求求了千万别说我！！！

三、成品来咯

好啦，经过我的不懈努力， 终于完成了我们圣诞树，但是还是觉得有点单调， 然后我又花了花了那么多的心思找了一张背景图， 然后再Come Some music， Eason 的 圣诞结 , 剑来！！！，错了错了， 成品来！！！

image.png

好的弄完了，完整项目当然是去我已经积了几层灰的git里拉啦， 冲 ！！！完整项目

avatar
文章
阅读
粉丝