微信小程序 使用canvas绘图

微信小程序的绘图是使用canvas，canvas的使用和普通的h5的canvas使用一样，没有什么区别

想使用canvas，首先是要在页面是创建canvas标签，如果只是想要获得图片，可以把canvas定位到页面之外

<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>
<button bindtap='click'>canvas绘图</button>

然后就在js里控制canvas绘图，具体的绘图方式可以参考微信小程序官方的API部分的绘图

click:function(){
  // 使用 wx.createContext 获取绘图上下文 context
    let context = wx.createCanvasContext('firstCanvas')
    ctx.setFontSize(20);
    ctx.setFillStyle('#666');
    ctx.fillText('我是测试信息', 30, 40);
}

canvas绘图里做一个圆形的图片比较麻烦，因为微信小程序的绘图并没有裁剪图片的API，所以只能曲线去完成，完成的思路是先调用save()方法保存之前的操作，然后画一个圆，再使用微信小程序绘图里的