微信小程序使用canvas的畫圖操作示例

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:01:53

微信小程序使用canvas的畫圖操作示例

微信小程序使用canvas的畫圖操作示例:本文實(shí)例講述了微信小程序使用canvas的畫圖操作。分享給大家供大家參考，具體如下：基礎(chǔ)寫起來太沒動(dòng)力了，也寫得亂七八糟的，還是直接解決一些小問題比較方便，代碼的方方面面的細(xì)節(jié)都會(huì)詳盡的解釋一下。 1、下面介紹一下canvas的畫圖，我這個(gè)簡(jiǎn)單一點(diǎn)，畫

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序使用canvas的畫圖操作示例:本文實(shí)例講述了微信小程序使用canvas的畫圖操作。分享給大家供大家參考，具體如下：基礎(chǔ)寫起來太沒動(dòng)力了，也寫得亂七八糟的，還是直接解決一些小問題比較方便，代碼的方方面面的細(xì)節(jié)都會(huì)詳盡的解釋一下。 1、下面介紹一下canvas的畫圖，我這個(gè)簡(jiǎn)單一點(diǎn)，畫

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

基礎(chǔ)寫起來太沒動(dòng)力了，也寫得亂七八糟的，還是直接解決一些小問題比較方便，代碼的方方面面的細(xì)節(jié)都會(huì)詳盡的解釋一下。

1、下面介紹一下canvas的畫圖，我這個(gè)簡(jiǎn)單一點(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ò)格式的圖片！?。?/p>

上面這個(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.js
Page({
 /**
 * 頁面的初始數(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ā)有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

微信小程序使用canvas的畫圖操作示例

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：微信微信小程序微信的

熱門焦點(diǎn)

微信小程序使用canvas的畫圖操作示例

微信小程序使用canvas的畫圖操作示例

微信小程序使用canvas的畫圖操作示例

最新推薦

猜你喜歡

熱門推薦