关于圣诞节和元旦，看到大家（情侣）在朋友圈发各种庆祝或者祝福的话，很感动，然后悄悄拉黑了。作为单身狗，我们也有自己的庆祝节日的方式。今天我们来实现一些加持效果。需要注意的是，所有效果都是使用画布实现的。祝福语偷了朋友的照片，很基础的一种庆祝方式，显示不同的文字，偶尔切换一次，很常见，但是对于低分辨率来说，这是最好的方式，也是庆祝节日最常用的方式，让我们展示一下一个更有效的版本在这里：基本原理是这样的：在canvas中绘制字符，具有渐变色效果，通过canvas的相关API获取imageData，即像素信息，同rgba。遍历imageData生成相关dom。设置时序，因为渲染的文字效果不同，当然还有转场效果。流程对应的代码：在canvas中写入，渐变效果：//像素的单位长度constrectWidth=parseFloat(document.documentElement.style.getPropertyValue('--rect-width'));constcanvas=document.createElement('canvas');canvas.width=100;canvas.height=20;constctx=canvas.getContext('2d');ctx.font='10018pxmonospace';ctx.textBaseline='top';//设置文本基线ctx.textAlign='center';//设置区域内所有像素为透明ctx.clearRect(0,0,canvas.width,canvas.height);//渐变效果constgradient=ctx.createLinearGradient(10,0,canvas.width-10,0);gradient.addColorStop(0,'red');gradient.addColorStop(1/6,'orange');gradient.addColorStop(2/6,'黄色');gradient.addColorStop(3/6,'green');gradient.addColorStop(4/6,'blue');gradient.addColorStop(5/6,'indigo');gradient.addColorStop(1,'violet');ctx.fillStyle=gradient;//y设置为2，因为火狐浏览器下效果不正常...ctx.fillText('Thisisatest',canvas.width/2,2);//插入文档。身体。附加子（画布）；像素点太多会卡顿，所以这里尽量用尽可能少的点来完成效果获取imageData，并生成相关的domconstimageData=ctx.getImageData(0,0,canvas.width,canvas.height);//打印console.log(imageData);imageData包含三个属性，data，width和height，data是一个一维数组，[[0-255]，[0-255]，[0-255]，[0-255]]，长度是一个倍数of4，4是一个小群，相当于rgba，但是透明度范围也是0~255，宽高相当于长宽，像素数=（高宽）4{设i=2000;constfragment=document.createDocumentFragment();while(i-->0){fragment.appendChild(document.createElement('li'));}ul。appendChild(fragment);}letiLi=0;for(letcolumn=0;column0){constli=ul.children[iLi++];li.style.opacity='1';//观察css，会发现所有显示点的初始位置都在中心li.style.transform=`translate(${column*rectWidth}px,${row*rectWidth}px)scale(1.5)`;//这里的比例纯粹是为了好看li.style.background=`rgba(${imageData.data[idx]},${imageData.data[idx+1]},${imageData.data[idx+2]},${imageData.data[idx+3]/255})`;}}}while(iLi<2000){constli=ul.children[iLi++];li.style.opacity='0';}定时器比较简单，就不写了。您可以查看源代码了解详细信息。在Chrome下有点卡，但是在Safari和Firefox顿下没有卡，原因不明。预览效果——本地Chrome打开很卡，Firefox和Safari是正常的圣诞树。早前是圣诞节，看到各种造型的圣诞树由人物组成，于是自己尝试了一下，比较简单。这一段用到了项目中的js代码，但是一看是不可执行的，因为我是按空格拆分的。需要注意的一点是：因为是处理文件，所以需要用node来处理图片，并生成相应的代码。如何让切割后的代码还能执行？针对以上几点，做如下分析：关于第一点和第二点，像上面的例子，我们还是需要canvas，node环境没有canvas这个元素，需要使用第三方库node-canvas(npm)例子：画好图后，我们可以像上面那样获取需要的ImageData，然后写入文件，基本上很简单。写的时候考虑到canvas有更多的API。使用的是Typescript，不影响阅读。它是9102岁。你不需要它。现在typescript已经成为一种社交语言，“嘿，你也在用typescript，我也在用~”）先写一个简单的版本，文本格式，显示基本图形constfs=require("fs");constpath=require('path');const{createCanvas,loadImage}=require('canvas');constcanvas=createCanvas(80,80)constctx:CanvasRenderingContext2D=canvas.getContext('2d')异步函数转换（输入：字符串，输出：字符串）{constimage:ImageBitmap=awaitloadImage(input);ctx.drawImage(图像,0,0,80,80);constimageData:ImageData=ctx.getImageData(0,0,canvas.width,canvas.height);const{宽度、高度、数据}=图像数据；让outStr='';for(letcol=0;colnewPromise((resolve)=>{setTimeout(()=>resolve(),t);});try{voidasyncfunctionmain(){letimg=fs.readdirSync(imgPath);让len=img.length;if(len<=1){awaitexecSync(`cd${imgPath}&&ffmpeg-i${mvPath}-fimage2-vffps=fps=30bad-%d.png`);img=fs.readdirSync(imgPath);len=img.length;}让开始=1;让计数=len；(asyncfunctioninter(i:number){if(i
