分享海报的功能目前比较普遍，尤其是电商企业。实习期间，他们接到了实现海报绘制和下载的需求，于是开始着手开发。接下来给大家展示一下具体的思路：1.封装常用的canavsAPI，方便复用beginPath();moveTo();arc();lineTo();closePath();clip();stroke(）;充满（）;下面是一些常用的API，具体参数可以参考下面的官方文档是封装的常用方法//设置字体样式functionsetStyle(_ctx,font,color,textAlign,textBaseline){textAlign=textAlign||“左边”;文本基线=文本基线||“中间”;_ctx.font=字体；_ctx.fillStyle=颜色；_ctx.textAlign=textAlign;_ctx.textBaseline=textBaseline;}//图像绘制方法functiondrawImg(_ctx,img,x,y,w,h){if(!img)return;_ctx.drawImage(img,x,y,w,h);}//头像圆角绘制函数drawImgRadius(_ctx,img,x,y,w,h,r){_ctx.save();_ctx.beginPath();_ctx.moveTo(x+r,y);_ctx.arc(x+r,y+r,r,1.5*MATH_PI,1*MATH_PI,true);_ctx.lineTo(x,y+h-r);_ctx.arc(x+r,y+h-r,r,1*MATH_PI,0.5*MATH_PI,true);_ctx.lineTo(x+w-r,y+h);_ctx.arc(x+w-r,y+h-r,r,0.5*MATH_PI,0*MATH_PI,true);_ctx.lineTo(x+w,y+r);_ctx.arc(x+w-r,y+r,r,0*MATH_PI,1.5*MATH_PI,true);_ctx.closePath();_ctx.clip();drawImg(_ctx,img,x,y,w,h);_ctx.restore();}2.图片的预处理（收集海报中需要用到的图片）可以设置一个收集图片的对象functionprePainting(args1,args2,args3){letimgObj={bg:args1,logo:args2,二维码:args3,};returnimgObj;}复制代码3.图片预加载（加载canavs中使用的图片）这里使用promise来处理图片加载过程，functionpreLoadImgs(imgs){letkeysArr=Object.keys(imgs);letpromiseArr=keysArr.map(key=>{returnnewPromise(resolve=>{let_img=newImage();_img.crossOrigin="anonymous";_img.onload=()=>{resolve({[key]:_img,});};_img.onerror=()=>{resolve({[key]:null,});};_img.src=imgs[key];});});returnPromise.all(promiseArr).then(resArr=>{returnresArr.reduce((accumulator,currentValue)=>{returnObject.assign({},accumulator,currentValue);},{});});}复制代码4.绘制海报调用绘制的具体实现方法。绘制成功后，调用toDataURL()将canvas对象转为base64位编码。5.实现海报下载功能。通过函数的download属性下载图片doDownLink(imgCanvas){//创建一个隐藏的可下载链接consta=document.createElement('a')//创建一个a标签a.href=imgCanvas;//分配标签的src属性a.download='.jpg';//触发点击document.body.appendChild(a);a.点击（）；//然后移除document.body.removeChild(a);}
