本文實例講述了微信小程序使用canvas的畫圖操作。分享給大家供大家參考，具體如下：

基礎寫起來太沒動力了，也寫得亂七八糟的，還是直接解決一些小問題比較方便，代碼的方方面面的細節都會詳盡的解釋一下。

1、下面介紹一下canvas的畫圖，我這個簡單一點，畫一個帶圖文的背景圖，圖片可以從后臺獲取也可以選擇本地的。canvas畫圖首先要在wxml里面新建一個<canvas>標簽，一定要寫上canvas-id='canvas的id'，這是必須條件，如下面代碼：

<canvas canvas-id='canvas' style='width:{{windowW}}px;height:{{windowH}}px'></canvas><button bindtap='chooseImage'>相冊</button>

2、上面canvas的寬高都是js控制的，使用?wx.getSystemInfo獲取屏幕的可見寬高。代碼如下：

wx.getSystemInfo({   success: function (res) {    that.setData({     windowW: res.windowWidth,     windowH: res.windowHeight    })   },})

相當的詳細，有沒有！！！

3、重點注意一下：在微信小程序的canvas畫圖中如果使用了網絡圖片，一定要先把這張圖片讀取下載下來（可使用wx.downloadFile），存為網絡格式的圖片！！！

上面這個操作是避免網絡狀況不好的時候canvas畫圖完成了背景圖片確顯示不出來的情況，同時，這個圖片所在的域名必須在微信公眾平臺配置一下，代碼如下：

wx.downloadFile({   url: '圖片路徑',   success: function (res) {    that.setData({     canvasimgbg: res.tempFilePath    })   }})

4、 我上面wxml代碼里面寫了一個按鈕，使用wx.chooseImage調用了系統相冊，所以說，我們選擇一張圖片畫進canvas也是可以的，代碼如下：

wx.chooseImage({   success: function (res) {    that.setData({     chooseimg: res.tempFilePaths[0]    })   },})

5、下面就是cancas畫圖啦，畫和屏幕一樣寬高的，然后我們再寫一行字哈哈哈，代碼如下：

var that = this;var windowW = that.data.windowW;var windowH = that.data.windowH;var canvasimgbg = that.data.canvasimgbg;var canvasimg1 = that.data.chooseimg;canvas.drawImage(canvasimgbg, 0, 0, windowW, windowH);canvas.drawImage(canvasimg1, 0, 10, 200, 200);canvas.setFontSize(50)canvas.fillText('Hello', 200, 200)canvas.draw(true,setTimeout(function(){   that.daochu()},1000));

使用canvas.draw()畫圖，完畢之后直接wx.canvasToTempFilePath導出圖片

6、導出圖片，代碼如下：

var that = this;var windowW = that.data.windowW;var windowH = that.data.windowH;wx.canvasToTempFilePath({   x: 0,   y: 0,   width: windowW,   height: windowH,   destWidth: windowW,   destHeight: windowH,   canvasId: 'canvas',   success: function (res) {    console.log(res)    wx.saveImageToPhotosAlbum({     filePath: res.tempFilePath,     success(res) {     }    })    wx.previewImage({     urls: [res.tempFilePath],    })   }})