canvas 绘制卡顿

Question

问题， 就是 canvas 用户在touchstart touchmove的时候 绘制出图形 。由于我是在touchmove的时候调用绘制方法，现在碰到性能不好的手机的时候 绘制的时候会有一点卡顿 这个有什么好的解决方法吗？我这里想到的是对touchMove 做节流 但是用户在设置的时间内 滑动很快 可能是用户滑动出了一个箭头 但是我在这个时间内只记录了一次touchMove 可能就只绘制了一条直线。或者还有其他的办法让手机引擎渲染更快？

如果想要体验的朋友 可以发你小程序demo,希望指正

touchStart(e) {
    //得到触摸点的坐标
    console.log(e)
    this.startX = e.changedTouches[0].x
    this.startY = e.changedTouches[0].y

    this.context.setStrokeStyle(this.data.color)
    this.context.setLineWidth(this.data.pen)
    this.context.setLineCap('round') // 让线条圆润
    this.context.beginPath()
  },
  touchMove(e) {
    var startX1 = e.changedTouches[0].x
    var startY1 = e.changedTouches[0].y

    this.context.moveTo(this.startX, this.startY)
    this.context.lineTo(startX1, startY1)
    this.context.stroke()

    this.startX = startX1;
    this.startY = startY1;
// 绘制
    this.context.draw(true);
    this.setData({
      lastSaveStatus: false,
    })
  },

Answer 1

canvas 双缓冲
作为关键字 google