2、css.container{display:flex;弹性方向：列；证明内容：居中；对齐项目：居中；左：0px；顶部：0px；宽度：100%；高度：100%；}.wrapper{宽度：100%；文本对齐：居中；显示：弹性；弹性方向：列；证明内容：居中；}.title{宽度：100%；字体大小：60px；字体粗细：700；字母间距：6px;}.author{宽度：100%;字体大小：56px；字体粗细：正常；颜色：#999；字母间距：6px；margin-top:20px;}canvas{position:absolute;顶部：0；左：0；z-索引：0；宽度：100%；高度：100%；指针事件：none;}3.JS实现（1）获取canvas元素，设置canvas元素的宽高，以及canvas2d的缩放比例，圆形透明度，窗口宽高（2）擦除之前绘制的内容，以及然后设置初始三角形的坐标放入path数组，然后调用绘图方法draw()，将path的值传入draw()，然后调用draw方法，直到图形的宽度等于或大于窗口宽度结束。第二条色带也是如此。(3)绘图方法的实现。路径中的两个点作为起点和终点，然后生成一个随机点，作为三角形的第三个点，绘制成三角形。然后随机生成一种颜色，将颜色填充到三角形中，然后将路径中的终点作为下一次的起点，将随机生成的点作为下一次的终点，放入路径数组。需要注意的是，对于随机生成的点，y轴坐标必须大于0且小于画布的高度。(4)生成随机颜色填充图形，用cos函数将128乘以128相加，随机生成一个0-256之间的数，然后向左移动16位，同理生成两个0-256之间的数，一个向左移动8位，最后将三个随机值拼接在一起，转化为十六进制。exportdefault{data:{title:"",height:0,width:0,RIBBON_WIDE:90,//色带宽度r:0,dpr:1,//像素值path:null,},onInit(){this.title="你好世界";},onShow(){this.clickBtn();setInterval(()=>{this.clickBtn();},2000);},clickBtn(){constel=this.$refs.streamer;constctx=el.getContext("2d");//获取画布2d上下文this.width=780;//设置窗口文档显示区域的宽高this.height=1600;el.width=this.width*this.dpr;el.height=this.height*this.dpr;ctx.scale(this.dpr,this.dpr);//水平和垂直缩放ctx.globalAlpha=0.6;//图形透明度this.init(ctx);},init(ctx){ctx.clearRect(0,0,this.width,this.height);//在擦除之前绘制this.path=[{x:0,y:this.height*0.7+this.RIBBON_WIDE},{x:0,y:this.he右*0.7-this.RIBBON_WIDE},{x:0,y:this.height*0.2+this.RIBBON_WIDE},{x:0,y:this.height*0.2-this.RIBBON_WIDE},];setInterval(()=>{if((this.path[1].x{if((this.path[3].xthis.height||温度<0?this.geneY(y):温度;}}总结以上就是我签名效果的全部内容，最终效果如动图所示。虽然样式、逻辑和功能可能比较简单，但是目前已经实现了彩带特效的基本功能，以后会继续做更多的特效。希望这篇内容能够对大家有所帮助。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。