分享海报的性能目前比拟常见，尤其是电商公司，在实习期间接到了一个实现海报绘制并且下载的需要，于是开始入手开发，接下来带大家说一下具体思路：

1.封装罕用的canavs API，不便复用
beginPath();
moveTo();
arc();
lineTo();
closePath();
clip();
stroke();
fill();

这里列举了一些常见的API，具体参数能够参考官网文档
上面是罕用办法封装

// 设置字体款式function setStyle(_ctx, font, color, textAlign, textBaseline) {  textAlign = textAlign || "left";  textBaseline = textBaseline || "middle";  _ctx.font = font;  _ctx.fillStyle = color;  _ctx.textAlign = textAlign;  _ctx.textBaseline = textBaseline;}// 图片绘制办法function drawImg(_ctx, img, x, y, w, h) {  if (!img) return;  _ctx.drawImage(img, x, y, w, h);}//头像圆角绘制function 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.图片的预处理 （收集海报中须要应用的图片）
能够定一个对象用来收集图片

function prePainting(args1,args2,args3) {  let imgObj = {    bg: args1,    logo: args2,    qrcode: args3,  };  return imgObj;}

复制代码
3.图片的预加载 （加载canavs中应用的图片）
这里用promise解决图片加载过程，

function preLoadImgs(imgs) {  let keysArr = Object.keys(imgs);  let promiseArr = keysArr.map(key => {    return new Promise(resolve => {      let _img = new Image();      _img.crossOrigin = "anonymous";      _img.onload = () => {        resolve({          [key]: _img,        });      };      _img.onerror = () => {        resolve({          [key]: null,        });      };      _img.src = imgs[key];    });  });  return Promise.all(promiseArr).then(resArr => {    return resArr.reduce((accumulator, currentValue) => {      return Object.assign({}, accumulator, currentValue);    }, {});  });}

复制代码
4.进行海报的绘制
去调用实现画图的具体实现的办法，绘制胜利后调用toDataURL()，用于将canvas对象转换为base64位编码。
5.实现海报的下载性能
通过a的download属性进行图片下载

function doDownLink(imgCanvas) {  // 创立暗藏的可下载链接  const a = document.createElement('a') // 创立一个a标签  a.href = imgCanvas; // a标签的src属性赋值  a.download = '.jpg';  // 触发点击  document.body.appendChild(a);  a.click();  // 而后移除  document.body.removeChild(a);}