微信小程式的繪圖是使用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()方法儲存之前的操作，然後畫一個圓，再使用微信小程式繪圖裡的clip() 方法，這個方法會在原來的畫布上裁剪任意形狀，接下來的操作都只能在這個裁剪的區域內，區域外的操作無效，在完成操作後，再使用restore()方法恢復正常操作。

      ctx.save()
      ctx.beginPath()
      ctx.arc(100, 100, 25, 0, 2*Math.PI)
      ctx.clip()
      ctx.drawImage(imagePath, 25, 25)
      ctx.restore()
      ctx.draw()