在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

canvas 繪制卡頓

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

如果想要體驗的朋友 可以發(fā)你小程序demo,希望指正

touchStart(e) {
    //得到觸摸點(diǎn)的坐標(biāo)
    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 雙緩沖
作為關(guān)鍵字 google

2018年1月11日 20:46