欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 09:30:09
本文实例讲述了微信小程序使用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);
   },
  })
 }
})

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