月亮长在海面上，天在这一刻----《望月怀远》(唐·张九龄)又到中秋节了，相信大家你收到了公司或其他朋友送的礼物月饼来了，相信没有人不期待中秋节（假期）。“小饼如嚼月，香脆糯”指的是美味的月饼。既然月饼深受大家的喜爱，今天我们就用canvas画出月饼，呈现在显示器前。本次使用的技术栈是vue+vite进行开发和编辑。（简单的html+css）当然这么简单的功能应该使用静态html。请问各位朋友，你们怎么会来这里？目录结构开始画（1）第一步先画一个富有中国元素的背景（有点密集恐惧症）canvas{width:100%;高度：100%；背景图像：重复径向渐变（圆在中心中心，透明0px，透明8px，rgba（255、255、255、0.05）8px，rgba（255、255、255、0.05）11px，透明11px，透明17px,rgba(255,255,255,0.05)17px,rgba(255,255,255,0.05)25px,透明25px,透明38px,rgba(255,255,255,0.05)38px,rgba(255,255,255,0.05)42px),repeating-radial-gradient(circleatcentercenter,rgb(230,0,0)0px,rgb(230,0,0)11px,rgb(230,0,0)11px,rgb(230,0,0)19px,rgb(230,0,0)19px,rgb(230,0,0)24px,rgb(230,0,0)24px,rgb(230,0,0)33px,rgb(230,0,0)33px,rgb(230,0,0)44px,rgb(230,0,0)44px,rgb(230,0,0)46px);background-size:30px30px;cursor:pointer;}画月饼线接下来就是画月饼的正式部分了，首先我们要拿到画布，然后画线。众所周知，月饼的图案大多是轴对称展示的，所以我们把它们提取出来，分门别类实现，最后在最下面加上我们的中秋祝福语或者诗句。构造函数（选项）{this.x=0;//x轴坐标this.y=0;//y轴坐标this.name="fivekernels"//填充名称this.strokeStyle="rgb(180,110,48)";//线条颜色this.fillStyle="rgb(251,216,96)";//填充颜色this.fontSize=36;//字体大小this.scale=1;//缩放大小Object.assign(this,options)this.ctx=null;this.progress=0;//绘制进度this.stepFn=[]//绘制步骤this.isComplete=false;//绘图是否结束this.nowDate=newDate();//当前时间this.lastDate=newDate();//结束时间returnthis;}render(ctx){//renderif(!ctx)thrownewError("contextisundefined.");this.ctx=ctx;this.stepFn.length=0;this.stepFn.push(()=>this.drawEdge(180,20))this.stepFn.push(()=>this.drawEdge(140,12))this.stepFn.push(()=>this.drawRoundRectPath(140,220,40))this.stepFn.push(()=>this.drawRoundRectPath(220,140,40))this.stepFn.push(()=>this.drawLine(30,-110,30,110))this.stepFn.push(()=>this.drawLine(0,-110,0,110))this.stepFn.push(()=>this.drawLine(-30,-110,-30,110))this.stepFn.push(()=>this.drawLine(-110,-30,110,-30))this.stepFn.push(()=>this.drawLine(-110,0,110,0))this.stepFn.push(()=>this.drawLine(-110,30,110,30))this.stepFn.push(()=>this.drawRect(140,140))this.stepFn.push(()=>this.drawBox(140))this.stepFn.push(()=>this.drawText())returnthis;}draw(){//绘制for(leti=0;ithis.stepFn.length)returnthis.isComplete=true;this.nowDate=newDate();if(this.nowDate-this.lastDate>200){this.progress++;this.lastDate=this.nowDate;}}drawBox(size){//绘图折线盒const{ctx,x,y,strokeStyle,scale}=this;letv=17,n=-size/2;ctx.save()ctx.translate(x,y);ctx.scale(scale,scale)ctx.beginPath();ctx.lineCap="round";ctx.lineWidth=4;ctx.strokeStyle=strokeStyle;ctx.moveTo(v+n,n)ctx.lineTo(v+n,大小-v+n)ctx.lineTo(大小-v+n,大小-v+n)ctx.lineTo(大小-v+n,v+n)ctx.lineTo(v*2+n,v+n)ctx.lineTo(v2+n,大小-v2+n)ctx.lineTo(大小-v2+n,大小-v2+n)ctx.lineTo(大小-v*2+n,45+n)ctx.stroke()ctx.restore();}drawLine(x1,y1,x2,y2){//绘图线条const{ctx,x,y,strokeStyle,scale}=this;ctx.save()ctx.translate(x,y);ctx.scale(scale,scale)ctx.beginPath();ctx.lineCap="round";ctx.lineWidth=4;ctx.strokeStyle=strokeStyle;ctx.moveTo(x1,y1)ctx.lineTo(x2,y2)ctx.stroke()ctx.restore();}drawRect(width,height){//绘制矩形const{ctx,x,y,strokeStyle,fillStyle,scale}=this;ctx.save()ctx.translate(x,y);ctx.scale(scale,scale)ctx.beginPath();ctx.lineCap="round";ctx.lineWidth=4;ctx.strokeStyle=strokeStyle;ctx.fillStyle=fillStyle;ctx.rect(-width/2,-height/2,width,width)ctx.fill();ctx.stroke()ctx.restore();}drawRoundRectPath(width,height,radius){//绘制圆角矩阵const{ctx,x,y,strokeStyle,fillStyle,scale}=this;letw=-width/2,h=-height/2ctx.save()ctx.translate(x,y);ctx.scale（规模，规模e)ctx.lineCap="round";ctx.strokeStyle=strokeStyle;ctx.fillStyle=fillStyle;ctx.lineWidth=5;ctx.beginPath();ctx.arc(宽度-半径+w,高度-半径+h,radius,0,Math.PI/2);ctx.lineTo(radius+w,height+h);ctx.arc(radius+w,height-radius+h,radius,Math.PI/2,Math.PI);ctx.lineTo(w,radius+h);ctx.arc(radius+w,radius+h,radius,Math.PI,Math.PI*3/2);ctx.lineTo(width-radius+w,h);ctx.arc(width-radius+w,radius+h,radius,Math.PI3/2,Math.PI2);ctx.lineTo(width+w,height-radius+h);ctx.closePath();ctx.stroke()ctx.restore();}drawEdge(radius,lineWidth){//绘制花边const{ctx,x,y,strokeStyle,fillStyle,scale}=this;letn=12,v=360/n,m=30;ctx.save()ctx.translate(x,y);ctx.scale(scale,scale)ctx.beginPath();ctx.lineCap="round";for(leti=0;i=3){size*=0.7;ctx.font=bolder${size}pxfangsong,selfctx.fillText(name.charAt(0),0,-size*1+2);ctx.fillText(name.charAt(1),0,大小*0+2);ctx.fillText(name.charAt(2),0,大小*1+2);}ctx.restore();}addverseusingcanvasfilltext填充相应的versedrawText(){const{ctx,w,h,text}=this;ctx.save();ctx.fillStyle="rgb(253,190,0)";ctx.textAlign=“中心”;ctx.font=bolder32pxfangsong,self;ctx.shadowColor="rgb(253,190,0)";ctx.shadowBlur=10;ctx.fillText(text[0].substr(0,this.textIndex),w/2,h*0.36+240);if(text[0].length在数据中定义口味类型：["黑芝麻","五仁","蛋黄","《莲蓉》、《豆沙》]，结束这次用到的一些图形绘制，希望大家灵活运用，举一反三，在中秋佳节临近之际，送给亲朋好友不一样的中秋月饼~点赞支持，手留余香，为之骄傲，动动小手发大财，感谢留下足迹。如果您认为这篇文章对您有用，请给我们的开源项目一个小星星：http://github.crmeb.net/u/defu任何帮助都将不胜感激！
