微信小程序使用canvas的画图操作示例

2019-11-19 12:15:52

字体：大中小

来源：转载

供稿：网友

本文实例讲述了微信小程序使用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.jsPage({ /**  * 页面的初始数据  */ 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);   },  }) }})

希望本文所述对大家微信小程序开发有所帮助。

上一篇：highCharts提示框中显示当前时间的方法

下一篇：js中数组对象去重的两种方法