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