鍍金池/ 問答/HTML5  HTML/ canvas 繪制卡頓

canvas 繪制卡頓

問題, 就是 canvas 用戶在touchstart touchmove的時候 繪制出圖形 。由于我是在touchmove的時候調用繪制方法,現在碰到性能不好的手機的時候 繪制的時候會有一點卡頓 這個有什么好的解決方法嗎?我這里想到的是對touchMove 做節(jié)流 但是用戶在設置的時間內 滑動很快 可能是用戶滑動出了一個箭頭 但是我在這個時間內只記錄了一次touchMove 可能就只繪制了一條直線?;蛘哌€有其他的辦法讓手機引擎渲染更快?

如果想要體驗的朋友 可以發(fā)你小程序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,
    })
  },
回答
編輯回答
薄荷糖

canvas 雙緩沖
作為關鍵字 google

2018年1月11日 20:46