如何在微信小程序中使用canvas畫圖

這篇文章將為大家詳細講解有關如何在微信小程序中使用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],
    })
   }
})

上面這些代碼已經完成啦！！！

主要就是各位使用的時候看需要什么樣的啦！

下面還是附上完整的代碼把！

// pages/canvas/canvas.js
Page({
 /**
  * 頁面的初始數據
  */
 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: '圖片鏈接',//注意公眾平臺是否配置相應的域名
   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);
   },
  })
 }
})

關于如何在微信小程序中使用canvas畫圖就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。