本文實(shí)例講述了微信小程序使用canvas的畫圖操作。分享給大家供大家參考，具體如下：
基礎(chǔ)寫起來太沒動(dòng)力了，也寫得亂七八糟的，還是直接解決一些小問題比較方便，代碼的方方面面的細(xì)節(jié)都會(huì)詳盡的解釋一下。
1、下面介紹一下canvas的畫圖，我這個(gè)簡單一點(diǎn)，畫一個(gè)帶圖文的背景圖，圖片可以從后臺(tái)獲取也可以選擇本地的。canvas畫圖首先要在wxml里面新建一個(gè)<canvas>標(biāo)簽，一定要寫上canvas-id='canvas的id'，這是必須條件，如下面代碼：
<canvas canvas-id='canvas' style='width:{{windowW}}px;height:{{windowH}}px'></canvas><button bindtap='chooseImage'>相冊(cè)</button>2、上面canvas的寬高都是js控制的，使用?wx.getSystemInfo獲取屏幕的可見寬高。代碼如下：
wx.getSystemInfo({ success: function (res) { that.setData({ windowW: res.windowWidth, windowH: res.windowHeight }) },})相當(dāng)?shù)脑敿?xì)，有沒有?。?！
3、重點(diǎn)注意一下：在微信小程序的canvas畫圖中如果使用了網(wǎng)絡(luò)圖片，一定要先把這張圖片讀取下載下來（可使用wx.downloadFile），存為網(wǎng)絡(luò)格式的圖片?。?！
上面這個(gè)操作是避免網(wǎng)絡(luò)狀況不好的時(shí)候canvas畫圖完成了背景圖片確顯示不出來的情況，同時(shí)，這個(gè)圖片所在的域名必須在微信公眾平臺(tái)配置一下，代碼如下：
wx.downloadFile({ url: '圖片路徑', success: function (res) { that.setData({ canvasimgbg: res.tempFilePath }) }})4、 我上面wxml代碼里面寫了一個(gè)按鈕，使用wx.chooseImage調(diào)用了系統(tǒng)相冊(cè)，所以說，我們選擇一張圖片畫進(jìn)canvas也是可以的，代碼如下：
wx.chooseImage({ success: function (res) { that.setData({ chooseimg: res.tempFilePaths[0] }) },})5、下面就是cancas畫圖啦，畫和屏幕一樣寬高的，然后我們?cè)賹懸恍凶止?，代碼如下：
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導(dǎo)出圖片
6、導(dǎo)出圖片，代碼如下：
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], }) }})上面這些代碼已經(jīng)完成啦?。?！
主要就是各位使用的時(shí)候看需要什么樣的啦！
下面還是附上完整的代碼把！
// pages/canvas/canvas.jsPage({ /** * 頁面的初始數(shù)據(jù) */ data: { }, onLoad: function (options) { var that = this; that.sys(); that.bginfo(); }, sys: function () { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ windowW: res.windowWidth, windowH: res.windowHeight }) }, }) }, bginfo: function () { var that = this; wx.downloadFile({ url: '圖片鏈接',//注意公眾平臺(tái)是否配置相應(yīng)的域名 success: function (res) { that.setData({ canvasimgbg: res.tempFilePath }) } }) }, canvasdraw: function (canvas) { 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(); }, daochu: function () { console.log('a'); 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], }) } }) }, chooseImage: function () { var that = this; var canvas = wx.createCanvasContext('canvas'); wx.chooseImage({ success: function (res) { that.setData({ chooseimg: res.tempFilePaths[0] }) that.canvasdraw(canvas); }, }) }})希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
