如何在微信小程序中使用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画图就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。