小程序canvas绘制基础+动态绘制canvas

设置设备像素比（用于适应px）

  setCanvasSize: function () {
    let $this = this
    var res = wx.getSystemInfoSync();
    var scale = 750 / res.windowWidth; //不同屏幕下canvas的适配比例；设计稿是750宽   
    // w = 515/scale     canvas尺寸=设计尺寸/scale
    $this.setData({
      scale
    })
  },

资源提前准备

图片资源要提前加载，不然手机无法绘制，开发者工具可以显示

    wx.downloadFile({
      url: '', //图片 
      success: (res) => {
        $this.setData({
          bgimg: res.tempFilePath
        })
      }
    })

绘制canvas内容

  draw() {
    let $this = this
    let bgimg = this.data.bgimg
    let scale = this.data.scale  //设备像素比
    let ctx = wx.createCanvasContext('mycanvas', this);  //获取canvas画布
    // ctx.globalAlpha = 0;
    ctx.setFillStyle('#FFFFFF')
    ctx.fillRect(0, 0, 515 / scale, 300 / scale);  //填充画布
    ctx.clearRect(0, 0, 515 / scale, 300 / scale);//清除画布
    let list = this.data.list
    ctx.globalAlpha = 1;
    ctx.drawImage(bgimg, 0, 0, 515 / scale, 300 / scale); //绘制背景图片
    ctx.setFillStyle("#FFF")
    ctx.setFontSize(18 / scale) //字体尺寸
    // for (const index in list) {
    let index = 0
    let canvastime = setInterval(() => {
      let y = 134 + index * 30
      console.log(index)
      
      ctx.save()  //保存画布
      ctx.restore()//获取保存画布
      ctx.fillText(list[index], 40 / scale, y / scale) //设置文字位置
      ctx.draw(true);  //画到画布上
      index++
      if (index == list.length) {
        clearInterval(canvastime)
      }
    }, 1000)
  },

将canvas绘制成可保存图片（ wx.canvasToTempFilePath）

  extraImage() {
    console.log(222)
    let $this = this
    // 提取画布中容器所在区域内容生成相同大小的图片，返回临时文件地址
    wx.canvasToTempFilePath({  
      canvasId: 'mycanvas',
      quality: 1,
      success: (res) => {
        let filePath = res.tempFilePath; //获取图片地址
        $this.setData({
          imageUrl: res.tempFilePath, //图片地址保存到本地
        })
      }
    }, this)
    
  },