在公司遇到一個需求小程式分享到朋友圈，套路就是生成小程式的二維碼圖片，技術思路簡單點直接下載小程式二維碼的圖但是這麼簡單就不用多BB寫文章分享了，複雜點就是用canvas畫出一張圖片效果如下。

說一下解決過程吧
1.小程式canvas畫圖自己一點點畫需要不停的算東西而且小程式繪圖API還是有點小多的對於一個剛接觸的新手，功能又有時間限制的我來說無疑是崩潰的，為了不讓自己被產品拿去祭天找到了一個庫，能夠快速的幫助我完成任務
Painter （希望有一天我也能有功力寫出庫共大家用 努力。。。。。）

2.在使用Painter庫的時候，讓canvas繪製圖片雖然圖片路徑給svg或者Base64在小程式開發工具上能顯示但是真機上就不能顯示，小程式大小又有限制所以圖片只能放到靜態資源伺服器上了

3.給載入圖片來繪製到canvas給一個loading互動，也就是在setData的時候給個這個程式碼

當繪圖完成後Painter會有一個方法叫ImgOK給這個方法寫個隱藏loading就好了

4.再用Painter畫的時候遇到一個bug就是如下圖

當我用一個矩形遮住我的背景圖的一部分的時候我的矩形寬度跟背景圖和canvas的寬度一樣但是在真機下左右會有一絲絲的距離沒有遮擋住但是在小程式開發工具裡是OK的程式碼如下，懷疑問題原因是rpx 聽大佬說rpx是根據裝置dpi算的 那這個bug真是蛋疼了，好在儲存下來的圖是沒有這個問題的不然就涼涼了

以上就是在繪製的時候遇到的一些問題 至於怎麼使用Painter 去GitHub去吧 希望能幫到你~