Canvas drawing Catton

The

problem is that canvas users draw graphics when they touchstart touchmove. Because I call the drawing method in touchmove, now there will be a little stutter when I come across a phone with poor performance. Is there any good solution? What I"m thinking about here is throttling the touchMove, but the user may quickly slide out an arrow within the set time, but I only recorded the touchMove once in this time and probably only drew a straight line. Or is there another way to make the phone engine render faster?

if you want to experience it, you can send Mini Program demo, hope to correct you

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,
    })
  },
Mar.30,2021

canvas double buffer
as keyword google

Menu