圣诞节的起源

 圣诞节源自古罗马人迎接新年的农神节，与基督教本无关系。在基督教盛行罗马帝国后，教廷将这种民俗节日纳入基督教体系，同时以庆祝耶稣的降生。但在圣诞节这天不是耶稣的生辰，因为《圣经》未记载耶稣具体出生时间，同样没提到过有此种节日，是基督教吸收了古罗马神话的结果。

 圣诞节是西方传统节日，也是许多西方国家一年中最重要的节日。每年这一天，欢快的圣诞歌在大街小巷飘扬，商场里流光溢彩，琳琅满目，到处弥漫着温馨欢乐的气息。孩子们在甜美的梦乡中，盼望着圣诞老人从天而降，带来梦寐以求的礼物。

 平安夜和圣诞节现在很多人都在过，对于很多人而言，并不是在做一个所谓的洋节，而是在这一天让自己爱的人和爱我们的人开心，正如网络上流行的一句话：“ 世界上本没有圣诞老人，所有的惊喜和礼物都来自于爱你的人。 ”

用 coding 说圣诞快乐

Canvas 渲染 圣诞树特效

index.html

**********
鱼找水的🎄

index.js

class ChristmasTree {constructor() {this.side = 20this.gap = 6 + this.sidethis.init()this.treeData = []}init() {this.canvas = document.querySelector('#canvas')this.ctx = this.canvas.getContext('2d')const { width, height } = this.canvasthis.width = widththis.height = heightthis.ctx.fillStyle = 'rgb(0, 0, 0)'this.ctx.fillRect(0, 0, width, height)}createArc(x, y, color) {this.ctx.beginPath()this.ctx.fillStyle = colorthis.ctx.arc(x, y, this.side / 2, 0, Math.PI * 2, false)this.ctx.fill()}createRect(x, y, color) {this.ctx.fillStyle = colorthis.ctx.fillRect(x, y, this.side, this.side)}createPentastar(x, y, color) {this.ctx.beginPath()const R = this.gap / 2,r = this.gap / 5for (var i = 0; i < 5; i++) {this.ctx.lineTo(Math.cos(((18 + i * 72) / 180) * Math.PI) * R + x, -Math.sin(((18 + i * 72) / 180) * Math.PI) * R + y)this.ctx.lineTo(Math.cos(((54 + i * 72) / 180) * Math.PI) * r + x, -Math.sin(((54 + i * 72) / 180) * Math.PI) * r + y)}this.ctx.closePath()this.ctx.lineWidth = '3'this.ctx.fillStyle = colorthis.ctx.fill()}buildTreeCrown(startNodeNum, rowsNum, startHeight) {const arr = []const midRect = this.width / 2 - this.side / 2const midArc = this.width / 2for (let i = 0; i < rowsNum; i++) {for (let j = 0; j < startNodeNum; j++) {if (rowsNum - i === 2 && startNodeNum - j <= 2) {arr.push({type: 'start',x: midArc + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),y: startHeight + this.gap * i + this.side / 2,color: rowsNum - i === 1 ? 'red' : 'yellow'})} else if (rowsNum - i === 1 && startNodeNum - j <= 2) {arr.push({type: 'arc',x: midArc + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),y: startHeight + this.gap * i + this.side / 2,color: 'red'})} else {arr.push({type: 'rect',x: midRect + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),y: startHeight + this.gap * i,color: i === rowsNum - 1 && startNodeNum - j >= 7 ? 'red' : 'green'})}}if (i === rowsNum - 3) {startNodeNum += 4} else {startNodeNum += 2}}return arr}buildTreeStump(row, col, gapRow) {const arr = []const midRect = this.width / 2 - this.side / 2for (let i = 0; i < row; i++) {for (let j = 0; j < col; j++) {arr.push({type: 'rect',x: midRect + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),y: (gapRow + i) * this.gap,color: 'rgb(67, 11, 0)'})}}return arr}setTreeData() {const _this = thislet gapRow = 1this.treeData = [{type: 'start',x: this.width / 2,y: this.side / 2 + 2,color: 'yellow'},...setTreeCrownData(3),...this.buildTreeStump(5, 3, gapRow)]function setTreeCrownData(crownNum) {const arr = []let indexNode = 1let rowsNum = 4for (let i = 0; i < crownNum; i++) {arr.push(..._this.buildTreeCrown(indexNode, rowsNum, _this.gap * gapRow))indexNode += 2gapRow += rowsNum}return arr}}renderTree() {this.setTreeData()for (const item of this.treeData) {if (item.type === 'arc') {const { x, y, color } = itemthis.createArc(x, y, color)} else if (item.type === 'rect') {const { x, y, color } = itemthis.createRect(x, y, color)} else if (item.type === 'start') {const { x, y, color } = itemthis.createPentastar(x, y, color)}}}
}

唯美圣诞树

里边用到的音乐自己下载，修改变量const files为对应mp3的路径

宝贝，选一首喜欢的歌吧
Snowflakes Falling Down by Simon Panrucker
This Christmas by Dott
No room at the inn by TRG Banks
Jingle Bell Swing by Mark Smeby
或者
Upload File
祝我最爱的girl圣诞节快乐
希望能与你度过以后的每一个圣诞节，I ❤️ you～

CSS实现圣诞树

圣诞树
★★★★★★

简易的圣诞树

线性树

卡片圣诞树

这个代码文件比较多，就不贴了。有需要的可以评论私聊，以后会上传到资源

到此，本章内容就介绍完啦，如果有帮助到你 欢迎点个赞👍👍吧！！您的鼓励是博主的最大动力！ 有问题评论区交流。