【圣诞节】简单代码实现圣诞树|圣诞贺卡 | 快来为心爱的她送上专属的圣诞礼物叭~

圣诞节马上就要到了，不知道给自己喜欢的人准备什么样的惊喜吗？作为一名程序员，当然是用编程制作专属于她or他的圣诞树！

目录

圣诞树

✨3D圣诞树

代码块

打开方式

修改位置

效果展示

✨音乐律动圣诞树

代码块

打开方式

效果展示

✨灯光圣诞树

代码块

修改位置

效果展示

圣诞贺卡

祝福绘制圣诞贺卡

代码块

修改位置

效果展示

雪橇雪人圣诞贺卡

代码块

效果展示

祝福语圣诞贺卡

代码块

修改位置

效果展示

源码获取方式

一年一度的圣诞节马上就要到了，看到好多程序员小伙伴已经开始炫耀自己制作的圣诞树了。今天就跟大家分享多种不同风格的圣诞树和圣诞贺卡，附上完整代码，拿来即用可以按照自己的喜好来去运行使用哦。

圣诞树

✨3D圣诞树

代码块

html, body{width: 100%;height: 100%;margin: 0;padding: 0;border: 0;}div{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;}var collapsed = true;function toggle(){var fs = top.document.getElementsByTagName('frameset')[0];var f = fs.getElementsByTagName('frame');if (collapsed){fs.rows = '250px,*';fs.noResize = false;f[0].noResize = false;f[1].noResize = false;}else{fs.rows = '30px,*';fs.noResize = true;f[0].noResize = true;f[1].noResize = true;}collapsed = !collapsed;}var b = document.body;var c = document.getElementsByTagName('canvas')[0];var a = c.getContext('2d');document.body.clientWidth;M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k10|!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>1,i++<W;)if(D>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,jH&Q()>.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//修改引号内的内容('Happy Christmas!',U,345);//例如：('猪猪圣诞快乐!',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+=.02},1)

打开方式

新建文本文档—-→将代码粘贴后保存—-→将文件后缀改为html打开即可

注意事项：用记事本输入代码，然后更改格式为html，有些人的电脑会默认隐藏文件格式，这时候你要在此电脑的查看选项中，把已知文件类型的扩展名这个选项的✓给打开，这样就会显示你每个文件的具体格式了。

修改位置

//修改引号内的内容('Happy Christmas!',U,345);//例如：('猪猪圣诞快乐!',U,345);源代码中已标注

效果展示

✨音乐律动圣诞树

代码块

  * { box-sizing: border-box;}body { margin: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #161616; color: #c5a880; font-family: sans-serif;}label{ display: inline-block; background-color: #161616; padding: 16px; border-radius: 0.3rem; cursor: pointer; margin-top: 1rem; width: 300px; border-radius: 10px; border: 1px solid #c5a880; text-align: center;}ul { list-style-type: none; padding: 0; margin: 0;}.btn{ background-color: #161616; border-radius: 10px; color: #c5a880; border: 1px solid #c5a880; padding: 16px; width: 300px; margin-bottom: 16px; line-height: 1.5; cursor: pointer;}.separator{ font-weight: bold; text-align: center; width: 300px; margin: 16px 0px; color: #a07676;}.title { color: #a07676; font-weight: bold; font-size: 1.25rem; margin-bottom: 16px;}.text-loading { font-size: 2rem;}  window.console = window.console || function(t) {};  if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*");}         
 
请选择音乐
 
 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 
const { PI, sin, cos } = Math;const TAU = 2 * PI;const map = (value, sMin, sMax, dMin, dMax) => { return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin);};const range = (n, m = 0) =>Array(n).fill(m).map((i, j) => i + j);const rand = (max, min = 0) => min + Math.random() * (max - min);const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));const randChoise = arr => arr[randInt(arr.length)];const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];let scene, camera, renderer, analyser;let step = 0;const uniforms = { time: { type: "f", value: 0.0 }, step: { type: "f", value: 0.0 } }; const params = {exposure: 1,bloomStrength: 0.9,bloomThreshold: 0,bloomRadius: 0.5 };let composer;const fftSize = 2048;const totalPoints = 4000;const listener = new THREE.AudioListener();const audio = new THREE.Audio(listener);document.querySelector("input").addEventListener("change", uploadAudio, false);const buttons = document.querySelectorAll(".btn");buttons.forEach((button, index) => button.addEventListener("click", () => loadAudio(index)));function init() { const overlay = document.getElementById("overlay"); overlay.remove(); scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000); camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008); camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715); const format = renderer.capabilities.isWebGL2 " />正在下载音乐，请稍等...';const files = ["https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];const file = files[i];const loader = new THREE.AudioLoader();loader.load(file, function (buffer) { audio.setBuffer(buffer); audio.play(); analyser = new THREE.AudioAnalyser(audio, fftSize); init();}); } function uploadAudio(event) {document.getElementById("overlay").innerHTML ='请稍等...';const files = event.target.files;const reader = new FileReader();reader.onload = function (file) { var arrayBuffer = file.target.result; listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {audio.setBuffer(audioBuffer);audio.play();analyser = new THREE.AudioAnalyser(audio, fftSize);init(); });};reader.readAsArrayBuffer(files[0]); } function addTree(scene, uniforms, totalPoints, treePosition) {const vertexShader = `attribute float mIndex;varying vec3 vColor;varying float opacity;uniform sampler2D tAudioData;float norm(float value, float min, float max ){ return (value - min) / (max - min);}float lerp(float norm, float min, float max){ return (max - min) * norm + min;}float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){ return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);}void main() { vColor = color; vec3 p = position; vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 ); float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r; float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 ); float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0); opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0); gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z ); gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `varying vec3 vColor;varying float opacity;uniform sampler2D pointTexture;void main() { gl_FragColor = vec4( vColor, opacity ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); }`;const shaderMaterial = new THREE.ShaderMaterial({ uniforms: {...uniforms,pointTexture: { value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } }, vertexShader, fragmentShader, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, vertexColors: true });const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const phases = [];const mIndexs = [];const color = new THREE.Color();for (let i = 0; i < totalPoints; i++) { const t = Math.random(); const y = map(t, 0, 1, -8, 10); const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2); const [z, x] = polar(ang, map(t, 0, 1, 5, 0)); const modifier = map(t, 0, 1, 1, 0); positions.push(x + rand(-0.3 * modifier, 0.3 * modifier)); positions.push(y + rand(-0.3 * modifier, 0.3 * modifier)); positions.push(z + rand(-0.3 * modifier, 0.3 * modifier)); color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5); colors.push(color.r, color.g, color.b); phases.push(rand(1000)); sizes.push(1); const mIndex = map(i, 0, totalPoints, 1.0, 0.0); mIndexs.push(mIndex);}geometry.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3).setUsage(THREE.DynamicDrawUsage));geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));const tree = new THREE.Points(geometry, shaderMaterial);const [px, py, pz] = treePosition;tree.position.x = px;tree.position.y = py;tree.position.z = pz;scene.add(tree); } function addSnow(scene, uniforms) {const vertexShader = `attribute float size;attribute float phase;attribute float phaseSecondary;varying vec3 vColor;varying float opacity;uniform float time;uniform float step;float norm(float value, float min, float max ){ return (value - min) / (max - min);}float lerp(float norm, float min, float max){ return (max - min) * norm + min;}float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){ return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);}void main() { float t = time* 0.0006; vColor = color; vec3 p = position; p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0); p.x += sin(t+phase); p.z += sin(t+phaseSecondary); opacity = map(p.z, -150.0, 15.0, 0.0, 1.0); vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 ); gl_PointSize = size * ( 100.0 / -mvPosition.z ); gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `uniform sampler2D pointTexture;varying vec3 vColor;varying float opacity;void main() { gl_FragColor = vec4( vColor, opacity ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); }`;function createSnowSet(sprite) { const totalPoints = 300; const shaderMaterial = new THREE.ShaderMaterial({uniforms: { ...uniforms, pointTexture: {value: new THREE.TextureLoader().load(sprite) } },vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true }); const geometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const sizes = []; const phases = []; const phaseSecondaries = []; const color = new THREE.Color(); for (let i = 0; i  { createSnowSet(sprite);}); } function addPlane(scene, uniforms, totalPoints) {const vertexShader = `attribute float size;attribute vec3 customColor;varying vec3 vColor;void main() { vColor = customColor; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_PointSize = size * ( 300.0 / -mvPosition.z ); gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `uniform vec3 color;uniform sampler2D pointTexture;varying vec3 vColor;void main() { gl_FragColor = vec4( vColor, 1.0 ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );}`;const shaderMaterial = new THREE.ShaderMaterial({ uniforms: {...uniforms,pointTexture: { value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } }, vertexShader, fragmentShader, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, vertexColors: true });const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const color = new THREE.Color();for (let i = 0; i  { const { x, y, z } = camera.position; console.log(`camera.position.set(${x},${y},${z})`); const { x: a, y: b, z: c } = camera.rotation; console.log(`camera.rotation.set(${a},${b},${c})`);});window.addEventListener( "resize", () => {const width = window.innerWidth;const height = window.innerHeight;camera.aspect = width / height;camera.updateProjectionMatrix();renderer.setSize(width, height);composer.setSize(width, height); }, false); }

打开方式

新建文本文档—-→将代码粘贴后保存—-→将文件后缀改为html打开即可

注意事项：用记事本输入代码，然后更改格式为html，有些人的电脑会默认隐藏文件格式，这时候你要在此电脑的查看选项中，把已知文件类型的扩展名这个选项的✓给打开，这样就会显示你每个文件的具体格式了。

效果展示

✨灯光圣诞树

代码块

html

 猪猪 ♥ 圣诞快乐 修改文字部分即可new Vue({el: '.tree',data:{}})

CSS

*{margin: 0;padding:0;}body{height:100vh;display:flex;justify-content:center;align-items: center;background-color: #233343;overflow:hidden;transform-style: preserve-3d;perspective: 1200px;}.tree{/* border:1px solid red; */width:1200px;height: 716px;position:relative;transform-style: preserve-3d;animation:spin 1s linear infinite}.tree-light{transform-style: preserve-3d;position:absolute;width: 8px;height:8px;border-radius:50%;left:50%;bottom:calc(var(--y)*1%);transform: translate(-50%,50%) rotateY(calc(var(--rotate,0)*1deg)) translate3d(0,0,calc(var(--radius,0)*25px));animation: flash calc(var(--speed) * 0.5s) calc(var(--delay)*0.5s) infinite, appear 0.5s calc(var(--appear)*0.05s);}.tree-star{stroke:#f5e0a3;stroke-dasharray: 1000 1000;width: 50px;height: 50px;filter:drop-shadow(0 0 10px #fcf1cf);position: absolute;left:50%;bottom:100%;transform: translate(-50%,0);animation: stroke 1s calc((var(--delay)*0.95)*0.02s) backwards;}.wish{stroke:#f5e0a3;stroke-dasharray: 1000 1000;position:absolute;left:50%;transform: translate(-20%,20%);width:1000px;height:300px;justify-content:center;align-items: center;color:#faebd7;font-size: 50px;}@keyframes appear {from{opacity:0;}}@keyframes flash {0%,100%{background-color:#4f60f6;}20%{background-color: #f64f4f;}40%{background: #4fecf6;}60%{background-color: #f6db4f;}80%{background-color: #f64fe5;}}@keyframes spin {to{transform: rotateY(360deg);}}@keyframes stroke{from{stroke-dashoffset: -1000;}}

修改位置

 猪猪 ♥ 圣诞快乐 修改文字部分即可源代码中已标注

效果展示

圣诞贺卡

祝福绘制圣诞贺卡

代码块

HTML

 ❤猪猪圣诞快乐

JS

$('text').each(function () {const el = $(this);const text = el.html().split('');el.html(`${text.join('')}`);});

CSS

@import url(https://fonts.googleapis.com/css" />

修改位置

//修改文字部分猪猪圣诞快乐

效果展示

雪橇雪人圣诞贺卡

代码块

HTML

JS

const hatEase = "Sine.easeInOut";let hatDuration = 0.3;const hatTl = gsap.timeline({repeat: -1,yoyo: true,}).to('#hat-1',{morphSVG: "M332.84 146.29s-3.54-36.88 76.59-39.21c0 0-23.41 39.65-38.22 46.62 0 0-33.76 16.5-38.37-7.41z",ease: hatEase,duration: hatDuration,},0).to('#hat-ball',{x: -10,y: -20,ease: hatEase,duration: hatDuration,},0)gsap.set('#snowman',{x: -30,y: -30,})gsap.set('#snowman-body',{x: -5,y: -3,rotate: 10,transformOrigin: '30% 40%',})const skingEase = "Sine.easeInOut";const skingTl = gsap.timeline({repeat: -1,yoyo: true,}).to('#snowman',{x: 30,y: 15,ease: skingEase,},"ski-right").to('#snowman-body',{x: 3,y: 3,rotate: -3,transformOrigin: 'center',ease: skingEase,},"ski-right")// .to('.head',{// x: 2,// y: 2,// ease: skingEase,// },"ski-right")skingTl.timeScale(0.4)const speedTl = gsap.timeline({paused: true,// repeat: -1,}).to('#snowman-container',{x: -50,y: 20,},0).to('.head',{x: -20,y: 20,},0).to('#snaman-face',{x: -3,y: 3,},0).to('.arms',{x: -10,y: 5,},0).to('#stick-back',{x: 0,y: -5,},0).to('#stick-front',{x: 0,y: -8,},0).to('#left-arm-1',{rotate: 20,transformOrigin: 'right top',},0).to('#right-arm-1',{rotate: 10,transformOrigin: 'right top',},0)function resetPosition(){gsap.to('#snowman-container',{ x: 0, y: 0, })gsap.to('.head',{ x: 0, y: 0, })gsap.to('#snaman-face',{ x: 0, y: 0, })gsap.to('.arms',{ x: 0, y: 0, })gsap.to('#stick-back',{ x: 0, y: 0, })gsap.to('#snowman-container',{ x: 0, y: 0, })gsap.to('#stick-front',{ x: 0, y: 0, })gsap.to('#left-arm-1',{ rotate: 0, })gsap.to('#right-arm-1',{ rotate: 0, })}for (let i = 0; i  {hatTl.timeScale(1.8);skingTl.timeScale(0.9);speedTl.restart();})svg.addEventListener('mouseleave', () => {hatTl.timeScale(1);skingTl.timeScale(0.4);resetPosition();})

CSS

body {width: 100%;height: 100vh;overflow: hidden;background: #f2adab;}.box {position: fixed;left: calc(50vw - 50vmin);top: calc(50vh - 37.5vmin);width: 100vmin;height: 75vmin;}svg {overflow: visible;}#snow {pointer-events: none;}.snow-clone {opacity: 0;}

效果展示

祝福语圣诞贺卡

代码块

HTML

body { background-color:#333; }#snow{background:none;font-family:Androgyne;background-image:url('https://www.iculture.cc/demo/Christmas/v7/img/ChQcWgQ.png'), url('https://www.iculture.cc/demo/Christmas/v7/img/5gvatHT.png'), url('https://www.iculture.cc/demo/Christmas/v7/img/pUPB6gi.png');height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1;-webkit-animation:snow 10s linear infinite;-moz-animation:snow 10s linear infinite;-ms-animation:snow 10s linear infinite;animation:snow 10s linear infinite}@keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}50%{background-position:500px 500px, 100px 200px, -100px 150px}100%{background-position:500px 1000px, 200px 400px, -100px 300px}}@-moz-keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}50%{background-position:500px 500px, 100px 200px, -100px 150px}100%{background-position:400px 1000px, 200px 400px, 100px 300px}}@-webkit-keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}50%{background-position:500px 500px, 100px 200px, -100px 150px}100%{background-position:500px 1000px, 200px 400px, -100px 300px}}@-ms-keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}50%{background-position:500px 500px, 100px 200px, -100px 150px}100%{background-position:500px 1000px, 200px 400px, -100px 300px}}.letter {background: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.3);margin: 26px auto 0;max-width: 550px;min-height: 300px;padding: 24px;position: relative;width: 80%;}.letter:before, .letter:after {content: "";height: 98%;position: absolute;width: 100%;z-index: -1;}.letter:before {background: #fafafa;box-shadow: 0 0 8px rgba(0,0,0,0.2);left: -5px;top: 4px;transform: rotate(-2.5deg);}.letter:after {background: #f6f6f6;box-shadow: 0 0 3px rgba(0,0,0,0.2);right: -3px;top: 1px;transform: rotate(1.4deg);}CSS JSResult Skip Results IframeEDIT ON/* style.css */html, body {height: 100%;}body {margin: 0;display: flex;/* This centers our sketch horizontally. */justify-content: center;/* This centers our sketch vertically. */align-items: center; }.polaroid a {background: #ffffff;display: inline-block;margin: 55px 75px 30px;padding: 15px 15px 30px;text-align: center;text-decoration: none;-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);box-shadow: 0 4px 6px rgba(0, 0, 0, .3);-webkit-transition: all .20s linear;-moz-transition: all .20s linear;transition: all .20s linear;z-index: 0;position: relative;transform: rotate(-9deg);}.polaroid a:after {color: #333;font-size: 25px;content: attr(title);position: relative;top: 15px;}.polaroid img {display: block;width: 250px;}.polaroid a:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);z-index: 10;-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);box-shadow: 0 10px 20px rgba(0, 0, 0, .7);} 
 情意绵绵，喜乐常。事事如意，人安康。风花雪月，圣诞至。祝福千万，表衷肠。家和兴旺，亲人吉祥，事业中天，学业辉煌。圣诞节快乐！
 var typed = new Typed('#typed', {stringsElement: '#typed-strings',typeSpeed: 50});const WANDERER_MOVE_MULTIPLIER = 8;const WANDERER_ROTATE_SPEED = 0.03; // very sensitiveconst PATH_WIDTH = 5;const PATH_HIGHLIGHT_WIDTH = 4;const LIGHT_GRAPHICS_WIDTH_HEIGHT = 60;const MAX_BULBS = 300;const BULB_COLORS = ['#00d9ff','#ff0d0d','#59ff9d','#b959ff'];const BULB_LAST_INDEX = BULB_COLORS.length - 1;const BULB_FREQUENCY = 200;let node;let pathGraphics;let bulbGraphics = [];let bulbs = [];let bulbTick = 0;let bulbFlip = false;let bulbColorIndex = 0;let bulbInterval = null;let done = false;function setup(){createCanvas(window.windowWidth, window.windowHeight);background(20);node = new Wanderer();pathGraphics = createGraphics(width, height);pathGraphics.noFill();pathGraphics.strokeCap(PROJECT);BULB_COLORS.forEach((color) => {bulbGraphics.push(getBulbGraphics(color));});bulbInterval = setInterval(() => {if(bulbs.length  bulb.render());}function addBulb() {const pos = node.getPosition();const direction = node.getDirection();bulbs.push(new Bulb(pos.x, pos.y, direction - (bulbFlip " />
 情意绵绵，喜乐常。事事如意，人安康。风花雪月，圣诞至。祝福千万，表衷肠。家和兴旺，亲人吉祥，事业中天，学业辉煌。圣诞节快乐！
//修改文字部分

效果展示

源码获取方式

圣诞树|圣诞贺卡 网站源码https://blog.csdn.net/dxt19980308?type=download

美酒，在酒杯中摇曳；灯火，在夜色中阑珊；幸福，在生活中陶醉；快乐，在节日中开怀；飞雪，在吉祥中飘落；问候，在真挚中送达。

希望大家在圣诞节都可以和喜欢的人在一起，送上那棵专属于她or他的圣诞树！