关于小程序canvas

接近年关大家新年快乐，这篇博客写一下小程序canvas，也算是为接下去的工作做准备吧！

之前写过小程序，那时候也有用到过canvas但是那时候没弄好项目黄了。这次卷土重来！

wxml

<canvas style="width: 200px; height: 200px;" canvas-id="firstCanvas"></canvas>

js

以前看的博客应是没弄懂但是知道以后很定会用到就把博客收藏起来了。现在回头去看这个博客直接就懂了毕竟现在项目写的比较多了，很多东西都是通的。

小程序的canvas不支持网络图片，canvas引用网络图片在开发者工具上是没有问题的但是到了手机上就会显示不出来，这里需要通过小程序的api先将网络图片存到手机上然后才能用到canvas上面。这里的api我用了wx.getImageInfo。

例子一我直接在百度上找了一张网上的图片然后存到手机上成功后会返回手机上图片的地址就可以用到canvas(es6的promise真的好用)。

saveImg () {
  return new Promise(function (resolve,reject) {
    wx.getImageInfo({
      src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1756712057,3191802878&fm=26&gp=0.jpg',
      success: function (data) {
        resolve(data.path)
      }
    })
  })
},

例子二我们正常要请求接口的数据，有模拟了接口请求的图片，这里我请求了豆瓣电影api的接口随便拿了一张图片。(这个操作实是在onLoad里面的)

例子二中的请求我是已经封装过的，上面请求成功的操作是先存网上找到的图片成功后才存接口请求到的，两个图片都存好后拿到地址才进行canvas操作。

var that = this
netWork.request({
    url: 'https://douban.uieee.com/v2/movie/top250',
    method: 'post',
    data: {
        start:248,
        count:6
    },
    success (res) {
      that.saveImg().then(img => {
        //网络文件在开发者工具上没问题但是到了手机上就有问题了需要wx.getImageInfo存成本地文件才能在手机上正常显示
        wx.getImageInfo({
          src: res.data.subjects[0].images.large,
          success: function (data) {
            that.click(data.path,img)
          }
        })
      })
    },
    fail (err) {
      console.log(err)
    }
})

下面是canvas。我把本地图片、网络图片、接口请求的图片放到一张canvas画布进行对比。

click (img = null,img2 = null) {
  const context = wx.createCanvasContext('firstCanvas')
  var that = this
  context.setStrokeStyle('#00ff00')
  context.setLineWidth(5)
  context.rect(0, 0, 200, 200)//绘制矩形
  context.stroke()//有moveTo或lineTo开始和结束时候要使用
  context.setStrokeStyle('#ff0000')//小程序设置线条样式
  context.setLineWidth(2)//小程序设置线条宽度
  context.moveTo(160, 100)//context.moveTo('目标路径X坐标', '目标路径Y坐标')
  context.arc(100, 100, 60, 0, 2 * Math.PI, true)//画圆context.arc('X坐标', 'Y坐标', '半径', '起始角度', '结束角度', false顺时针,true逆时针)
  context.moveTo(140, 100)//context.moveTo('目标路径X坐标', '目标路径Y坐标')
  context.arc(100, 100, 40, 0, Math.PI, false)//画圆context.arc('X坐标', 'Y坐标', '半径', '起始角度', '结束角度', false顺时针,true逆时针)
  context.moveTo(85, 80)//context.moveTo('目标路径X坐标', '目标路径Y坐标')
  context.arc(80, 80, 5, 0, 2 * Math.PI, true)//画圆context.arc('X坐标', 'Y坐标', '半径', '起始角度', '结束角度', false顺时针,true逆时针)
  context.moveTo(125, 80)//context.moveTo('目标路径X坐标', '目标路径Y坐标')
  context.arc(120, 80, 5, 0, 2 * Math.PI, true)//画圆context.arc('X坐标', 'Y坐标', '半径', '起始角度', '结束角度', false顺时针,true逆时针)
  context.stroke()//有moveTo或lineTo开始和结束时候要使用
  //引用本地图片
  context.drawImage(this.data.img,100,0,100,100)//引入图片context.drawImage('路径','X轴距离','Y轴距离','引入图片长','引入图片宽')
  //引用网络图片
  if (img2 != null) {
    context.drawImage(img2,0,100,100,100)//引入图片context.drawImage('路径','X轴距离','Y轴距离','引入图片长','引入图片宽')
  }
  context.setFontSize(16);//设置文字大小
  context.setFillStyle("white");//设置文字颜色
  context.fillText('世界你好',50,150);//文字内容和坐标位置
  if (img != null) {
    //引用接口图片
    context.drawImage(img,100,100,100,100)//引入图片context.drawImage('路径','X轴距离','Y轴距离','引入图片长','引入图片宽')
  }
  context.draw()//生成canvas图片
},

效果

这里要注意的是如果两个要画的内容坐标重叠的时候后面画的会遮住前面话的内容，就像上面的文字一部分被其中右下角的图片盖住了。