微信小程序canvas实现画图可以恢复上一步操作以及从头演示（有效果图）

效果图

.wxml

<canvas disable-scroll="{{true}}" style="width:100%;height:400px;background-color: #fff;"
  type="2d" id="canvas" bindtouchstart="canstart" bindtouchmove="canvasmove"
></canvas>
<button bindtap="save">保存画布</button>
<button bindtap="canvas_restore" data-type="1">撤销</button>
<button disabled="{{disabled}}" bindtap="canvas_restore" data-type="2">演示绘画</button>

.js

var canvas = null,ctx = null,dpr = wx.getSystemInfoSync().pixelRatio
Page({
  data: {
    canvas_neto:[],
    disabled:false,
  },
  onLoad(){
    wx.createSelectorQuery().select('#canvas')
    .fields({ node: true, size: true })
    .exec((res) => {
      canvas = res[0].node
      ctx = canvas.getContext('2d')
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      ctx.strokeStyle = "#0081ff"
      ctx.lineWidth = 3
      ctx.scale(dpr, dpr)
    })
  },
  canstart(e){
    ctx.beginPath()
    ctx.moveTo(e.changedTouches[0].x,e.changedTouches[0].y)
    this.data.canvas_neto.push({point_x:e.changedTouches[0].x,point_y:e.changedTouches[0].y,list:[]})
  },
  canvasmove(e){
    ctx.lineTo(e.touches[0].x, e.touches[0].y)
    ctx.stroke()
    this.data.canvas_neto[this.data.canvas_neto.length - 1].list.push({x:e.touches[0].x,y:e.touches[0].y})
  },
  canvas_restore(e){
    var that = this
    var type = e.currentTarget.dataset.type
    var canvas_neto = that.data.canvas_neto
    if(canvas_neto.length < 1){
      return false      
    }
    that.setData({
      disabled:true
    })
    ctx.clearRect(0, 0, canvas.width / 2, canvas.height / 2)
    if(type == 1){
      canvas_neto.splice(canvas_neto.length - 1, 1); 
      for(let i = 0;i < canvas_neto.length;i++){
        ctx.beginPath()
        ctx.moveTo(canvas_neto[i].point_x, canvas_neto[i].point_y)
        for(let j = 0;j < canvas_neto[i].list.length;j++){
          ctx.lineTo(canvas_neto[i].list[j].x, canvas_neto[i].list[j].y)
          ctx.stroke()
        }
      }
      this.setData({
        disabled:false
      })
    }else{
      var i = 0,j = 0;
      ctx.beginPath()
      ctx.moveTo(canvas_neto[i].point_x, canvas_neto[i].point_y)
      numDH(i,j)
      function numDH() {
        if(j < canvas_neto[i].list.length){
          setTimeout(function () {
            ctx.lineTo(canvas_neto[i].list[j].x, canvas_neto[i].list[j].y)
              ctx.stroke()
            j++
            numDH()
          }, 20)
        }else{
          i++
          j = 0
          if(i < canvas_neto.length){
            ctx.beginPath()
            ctx.moveTo(canvas_neto[i].point_x, canvas_neto[i].point_y)
            numDH()
          }else{
            that.setData({
              disabled:false
            })
          }
        }
      }
    }
  },
  save(){
    wx.canvasToTempFilePath({
      canvas: canvas,
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) { 
            wx.showToast({
              title: '保存成功~',
            })
          }
        })
      }
    })
  }
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。