mpvue小程序海报分享之图片绘制

html主要代码

//to do something...

//to do something...

图片绘制代码

//to do something...
methods:{
    // 图片绘制
    drawImg(){
      let that = this;
      let query = mpvue.createSelectorQuery();
      // 获取画布信息
      query.select("#poster").boundingClientRect(rect => {
          // console.log(rect); rect为画布属性
          //获取绘图上下文
          const ctx = mpvue.createCanvasContext("poster");
          // 背景图绘制
          ctx.save(); //保存画布之前信息
          this.roundRect(ctx,0,0,rect.width,rect.height,10,'#fff');
          ctx.restore();//获取画布之前信息

          // 主图绘制
          ctx.save();
          this.roundRect(ctx,3,3,rect.width-6,311,10,'#fff');
          //mainImgInfo.path 为网络图片地址
          ctx.drawImage(mainImgInfo.path,3,-6,290,320);
          ctx.restore();

          /** 圆形背景绘制
           *   x:圆心x坐标
           *   y:圆心y坐标
           *   r:圆半径
           */
          let circle = (x,y,r)=>{
            ctx.beginPath()
            ctx.arc(x, y, r, 0, Math.PI * 2);
            //设置填充色为白色
            ctx.setFillStyle('#fff')
            // 设置阴影
            ctx.setShadow(0, 0, 3, '#d6d6d6')
            ctx.fill()
          }
          /** 圆形图片绘制
           *   x:圆心x坐标
           *   y:圆心y坐标
           *   r:圆半径
           *   src:图片地址
           *   x1:图片左上角x坐标
           *   y1:图片左上角y坐标
           *   w:图片宽度
           *   h:图片高度
           */
          let circleImg = (x,y,r,src,x1,y1,w,h)=>{
              ctx.save()
              ctx.beginPath()
              // 画圆
              ctx.arc(x, y, r, 0, Math.PI * 2);
              // 剪切
              ctx.clip();
              // 绘图
              ctx.drawImage(src,x1,y1,w,h);
              ctx.restore()
          }

          circle(50, 342, 33);
          circle(246, 342, 33);
          circle(149, 339, 37);
          //下面三个图片地址为本地图片地址
          circleImg(50, 342, 31,'/static/images/tempImg/lottery.png',19, 311,62,62);
          circleImg(246, 342, 31,'/static/images/tempImg/lottery.png',215, 311,62,62);
          circleImg(149, 339, 35,'/static/images/tempImg/lottery.png',114, 304,70,70);

          /** 文字绘制
           *   content:文字内容
           *   src:图片地址
           *   x:文字左上角x坐标
           *   y:文字左上角y坐标
           */
          let text = (ctx,content,x,y)=>{
            ctx.setTextAlign('center');   // 文字居中
            ctx.setFillStyle('#000'); // 文字颜色：黑色
            //设置字体大小
            ctx.setFontSize(9)
            ctx.fillText(content, x, y);
          }

          // 加粗效果
          text(ctx,name,50,388-0.5)
          text(ctx,name,50-0.5,388)

          text(ctx,'为您贴心服务',50,400)

          text(ctx,'长按扫码',149,388)
          text(ctx,'进入活动页',149,400)

          text(ctx,'幸运大转盘',246,388)
          text(ctx,'赢积分享好礼',246,400)

          ctx.draw();
      }).exec();
    },
    /**
     * 
     * @param {CanvasContext} ctx canvas上下文
     * @param {number} x 圆角矩形选区的左上角 x坐标
     * @param {number} y 圆角矩形选区的左上角 y坐标
     * @param {number} w 圆角矩形选区的宽度
     * @param {number} h 圆角矩形选区的高度
     * @param {number} r 圆角的半径
     * @param {number} color 圆角的背景颜色
     */
    roundRect(ctx, x, y, w, h, r,color) {
      // 开始绘制
      ctx.beginPath()
      // 设置填充背景的颜色
      ctx.setFillStyle(color)
      // 左上角
      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
      // border-top
      ctx.moveTo(x + r, y)
      ctx.lineTo(x + w - r, y)
      ctx.lineTo(x + w, y + r)
      // 右上角
      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
      
      // border-right
      ctx.lineTo(x + w, y + h - r)
      ctx.lineTo(x + w - r, y + h)
      // 右下角
      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
      
      // border-bottom
      ctx.lineTo(x + r, y + h)
      ctx.lineTo(x, y + h - r)
      // 左下角
      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
      
      // border-left
      ctx.lineTo(x, y + r)
      ctx.lineTo(x + r, y)

      //填充背景色
      ctx.fill()
      ctx.closePath()
      // 剪切
      ctx.clip()
    },
}
//to do something...

效果图

背景图(白色区域为canvas区域，背景图与canvas大小一致)

c1.png

背景图+主图

c2_看图王.png

背景图+主图+圆形背景图

c3_看图王.png

背景图+主图+圆形背景图+圆形图

c4_看图王.png

背景图+主图+圆形背景图+圆形图+文字

c5_看图王.png

参考文章链接https://juejin.im/post/5b7cecd7e51d4538e3318f27