/**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

    this.drawCanvasPic();

  },

  previewImage: function () {

    console.log(1);

    wx.canvasToTempFilePath({

      canvasId: 'myPicCanvas',

      success: function (res) {

        var tempFilePath = res.tempFilePath;

        console.log(tempFilePath);

        wx.previewImage({

          current: tempFilePath, // 当前显示图片的http链接

          urls: [tempFilePath] // 需要预览的图片http链接列表

        })

      },

      fail: function (res) {

        console.log(res);

      }

    });

  },

  drawCanvasPic: function () {

    let ctx = wx.createCanvasContext('myPicCanvas');

    let ctxW = 100;

    let ctxH = 700;

    // 默认像素比

    // 屏幕系数比，以设计稿375*667（iphone7）为例

    let XS =  375;

    /* 绘制头像 */

    let avatarurl_width = 100;    //绘制的头像宽度

    let avatarurl_heigth = 100;   //绘制的头像高度

    let avatarurl_x = 50;   //绘制的头像在画布上的位置

    let avatarurl_y = 50;   //绘制的头像在画布上的位置

    ctx.save();

    ctx.beginPath(); //开始绘制

    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针

    ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

    ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

    ctx.drawImage('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2369419058,1797305489&fm=27&gp=0.jpg', avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制 

    ctx.draw(); //可将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中

  },

  savePic: function (e) {

    console.log(111);

    wx.canvasToTempFilePath({

      canvasId: 'myPicCanvas',

      success: function (res) {

        console.log(res);

        wx.saveImageToPhotosAlbum({

          filePath: res.tempFilePath,

          success(result) {

            wx.showToast({

              title: '图片保存成功',

              icon: 'success',

              duration: 2000

            })

          }

        })

      }

    })

  },