wepy 微信小程序canvas 注意事项

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()