便于理解 现在拆分来一步步的看
点击保存按钮之后
第一步 定义出来画布的位置在一个看不见的位置
第二步 根据getImageInfo方法定义位置尺寸 大小 贴上图片
关键在于定时器的先后顺序 先铺设背景图 再在背景图上贴上自己需要的元素 这里需要用上定时器 保证图片层级在这里插入代码片关系的先后顺序,
下面展示一些 内联代码片。

SaveCard:function(){
    var that = this
    const ctx = wx.createCanvasContext('share');
    that.setData({
      loadingHidden: false
    })
    wx.getImageInfo({
          src: that.data.activeimage,
          success: function (res){        
            ctx.drawImage(res.path,0,0,375,812);
            ctx.setFontSize(18)
            ctx.fillStyle = '#f8e6b2'
            ctx.fillText(that.data.nickName,76,125)
            wx.getImageInfo({
              src: that.data.avatarUrl,   
              success: function (res){
                ctx.save()
                ctx.beginPath()
                ctx.arc(48,118,20,0,2*Math.PI)
                ctx.clip()
                ctx.drawImage(res.path, 28,98,40,40);
                ctx.restore()
                setTimeout(function(){
                  ctx.draw(false, function () {
                    that.setData({
                      loadingHidden: true
                      })
                      wx.canvasToTempFilePath({
                      canvasId: 'share',
                      success: function success(res) {
                      wx.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success(res) {
                          wx.showToast({
                            title: '保存图片成功！',
                          })
                        },
                        fail(res) {
                          wx.showToast({
                            title: '保存图片失败！',
                          })
                        }
                      })
                      
                      }, 
                      fail: function (e) {}
                      });
                  })    
                  },1000)
              }
            })
            that.setData({
              loadingHidden: false
            })
          }
        })
        that.setData({
          loadingHidden: true
        })
  },

画布组件其实就是用来画一些官方文档没有提供的东西，这里要注意官方属性的使用，因为属性正好截图一个屏幕，所以就不用手打的形式了，直接贴图啦~~~。

属性

代码演示

1.首先我们在.wxml文件中创建一个canvas组件，并指定id：

<!--miniprogram/pages/index/index.wxml-->
<text>小程序画布组件</text>

<!--
  canvas-id声明id方便获取canvas的上下文
-->
<canvas style="width:600rpx;height:600rpx;" canvas-id="canvas"></canvas>

2.在.js文件的onReady方法中通过id获取到上下文，并绘制一个圆：

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
    /**
     * 获取上下文
     */
    var context = wx.createCanvasContext('canvas');

    //描述绘制颜色
    context.setStrokeStyle("#ff0000");
    //设置绘画线条的宽度
    context.setLineWidth(2);

    //将起点移动到 x160 y100的位置
    context.moveTo(160,100);

    // x y 半径 弧度 画圆 是否逆时针
    context.arc(100,100,60,0,2*Math.PI,true);

    //将路径庙会出来
    context.stroke();

    //将园画到canvas上面
    context.draw();
},

3.看一下效果图，可以看到画布上面绘制了一个红色的圆，绘制过程的相关注释也已经写在代码上面了：

4.圆绘制好了我们在圆的基础上面添加一些东西，接下来画一个微笑的嘴巴，首先将我们的画笔移动到context.moveTo(140,100);的位置，然后绘制context.arc(100,100,40,0,Math.PI);我们就可以看到下面的效果：

5.然后我们绘制左眼和右眼，首先要将画笔move移动到指定绘制，然后进行绘制：

/**
* 绘制笑脸 左眼
*/
context.moveTo(85,80);
context.arc(80,80,5,0,2*Math.PI,true);

/**
* 绘制笑脸 右眼
*/
context.moveTo(125,80);
context.arc(120,80,5,0,2*Math.PI,true);

6.看一下效果图：

7.贴一下js文件所有代码：

// miniprogram/pages/index/index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    /**
     * 获取上下文
     */
    var context = wx.createCanvasContext('canvas');

    //描述绘制颜色
    context.setStrokeStyle("#ff0000");
    //设置绘画线条的宽度
    context.setLineWidth(2);

    //将起点移动到 x160 y100的位置
    context.moveTo(160,100);

    // x y 半径 弧度 画圆 是否逆时针
    context.arc(100,100,60,0,2*Math.PI,true);

    /**
     * 绘制笑脸 嘴巴
     */
    context.moveTo(140,100);
    context.arc(100,100,40,0,Math.PI);

    /**
     * 绘制笑脸 左眼
     */
    context.moveTo(85,80);
    context.arc(80,80,5,0,2*Math.PI,true);

    /**
     * 绘制笑脸 右眼
     */
    context.moveTo(125,80);
    context.arc(120,80,5,0,2*Math.PI,true);

    //将路径庙会出来
    context.stroke();

    //将园画到canvas上面
    context.draw();
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("hide  监听页面隐藏....比如从一个页面跳转到另外一个页面");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("unload  监听页面卸载....关闭当前页面");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

画布的简单使用到这里就结束了，更多使用方法以及例子可以查阅小程序画布组件官方文档。

微信小程序画布绘制

生成上下文

ctx = wx.createCanvasContext('canvasID');

对应的节点信息

<canvas canvas-id="canvasID" 
	class="canvas-one"
	style="width:{{width}}px;height:{{height}}px">
 </canvas>

获取对应的手机屏幕的大小

wx.getSystemInfo({
    success: res => {
        rpx = res.windowWidth/375; // 像素比/iPhone6大小
        this.setData({
          width: res.windowWidth,
          height: res.windowHeight
        })
    }
})

canvas 是在一个二维的网格当中,左上角的坐标为(0, 0)

网络图片在画布中不显示的，所以要这样操作，转换成临时图片

wx.getImageInfo({
    src: img,
    success: res => {
        this.setData({
        	img: res.path
        }) 
    }
});

... ctx.drawImage(img, 0, 0, 150, 100);

绘制图像，drawImage，绘制图像，图像保持原始尺寸，参数： 路径，x 坐标，y 坐标，宽度，高度

ctx.drawImage(path, 0, 0, 150, 100);

填充画布背景色， 填充坐标 （x, y, with, height)

ctx.setFillStyle('#f6f6f6');
ctx.fillRect(0*rpx, 0*rpx, width, height);

绘制文字及大小

ctx.setFontSize(15*rpx);
ctx.fillStyle = "#666";
ctx.fillText("字体", 24*rpx, 341*rpx);

metrics测量文本尺寸信息，目前仅返回文本宽度

const metrics = ctx.measureText('Hello World');
console.log(metrics.width);

导出图片

导出图片，把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径

wx.canvasToTempFilePath({
    x: 100,
    y: 200,
    width: 50,
    height: 50,
    destWidth: 100,
    destHeight: 100,
    canvasId: 'myCanvas',
    success: function(res) {
      	console.log(res.tempFilePath)
    } 
})

保存图片

saveCanvas: function(){
    wx.showLoading({title: '海报生成中'});
     setTimeout(() => {
         wx.hideLoading();
         wx.canvasToTempFilePath({
             x: 0,
             y: 0,
             canvasId: 'canvasID',
             fileType: 'png',
             success: res => {
                 let url = res.tempFilePath;
                 wx.getSetting({ //询问用户是否保存相册到本地
                     success: set => {
                         if (set.authSetting['scope.writePhotosAlbum']) {
                          wx.saveImageToPhotosAlbum({
                                 filePath: url,
                                 success: (res) => {
                                     Tools.$Toast('海报已为您保本地');
                                 }
                             })  
                             
                         } else {
                            Tools.$Toast('保存失败!请开启访问手机相册权限');
                             wx.authorize({
                                 scope: 'scope.writePhotosAlbum',
                                 success: res => {
                                     wx.saveImageToPhotosAlbum({
                                         filePath: url,
                                         success: (res) => {
                                             Tools.$Toast('海报已为您保本地');
                                         }
                                     }) 
                                 },
                                 fail: res => { 
                                     wx.showModal({ title: '保存失败', 
                                         content: '请开启访问手机相册权限',
                                         success(res) {
                                             if (res.confirm){
                                                 wx.openSetting(); // 无效
                                             }
                                         } 
                                     }) 
                                 }
                             })                
                         }
                     }
                 })
             },
             fail: function (res) {
                 Tools.$Toast('海报获取失败');
             }
         })
     }, 600);
  },