1.在自定义组件创建cavans画布，需要添加定义this指向。
const ctx = wx.createCanvasContext('myCanvas', this.$wx)
2.使用外部链接的图片不能直接使用，要先转换后才能绘制
wx.getImageInfo（）
3.画矩形，并用图片填充的顺序。因为图片用了clip剪切了某个区域，之后的绘图都会被限制在被剪切的区域内，所以要先save后restore
ctx.save();
ctx.beginPath();
ctx.arc();
ctx.stroke();
ctx.clip();
ctx.drawImage();
ctx.restore();
之后继续绘制图形，要再次ctx.beginPath();
4.绘制圆形图片
const avatarurl_width = 40 * this.scaleX; //绘制的头像宽度
const avatarurl_heigth = 40 * this.scaleX; //绘制的头像高度
const avatarurl_x = 10 * this.scaleX; //绘制的头像在画布上的位置
const avatarurl_y = 330 * this.scaleY; //绘制的头像在画布上的位置
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();
ctx.drawImage(avator, avatarurl_x,avatarurl_y,avatarurl_width, avatarurl_heigth );
5. 画完之后，cavans转图片
wx.canvasToTempFilePath()
