canvas画图画的越多越卡

还有就是绘制的时候，将获取到的坐标点放进数组中，这样方便使用删除

例：

// 手指触摸动作开始

canvasStart: function(e){

const touchs = []

let point = { x: e.changedTouches[0].x, y: e.changedTouches[0].y };

touchs.push(point);

},

// 手指触摸动作移动

canvasMove: function(event){

const that = this;

let point = { x: event.touches[0].x, y: event.touches[0].y };

touchs.push(point);

if (touchs.length >= 2) {

that.draw(touchs)

}

},

// 触摸动作结束

canvasEnd: function (event){

// 清空轨迹数组

for (let i = 0; i < touchs.length; i++) {

touchs.pop()

}

},

//绘制

draw: function (touchs) {

let point1 = touchs[0]

let point2 = touchs[1]

touchs.shift()

context.moveTo(point1.x, point1.y)

context.lineTo(point2.x, point2.y)

context.stroke()

context.draw(true)

}

小程序canvas在画图时重复使用canvasContext.draw(true)后界面就会经常出现漏帧、卡顿等现象。我的解决办法：在重头绘制canvas时调canvasContext.draw(false)。但是如果一个一直需要保存绘图轨迹的canvas,怎么才能解决它调用canvasContext.draw(true)导致的卡顿问题呢？

同遇到类似问题，关键我小程序没迭代，以前不卡现在卡…这就很尴尬了

遇到相同问题，在真机上画多了确实会非常卡。楼主解决了吗？

卡顿的原因我遇到的有两个：1是一个页面用了多个canvas；2是算法不合理

因为在你绘制的过程中，获取到的坐标点一直缓存在你的手机上，手机的内存是有限的，而这是非常的耗内存的。所以你在绘图的过程中需要把你用过的、不需要的坐标点清空删除

画一段时间后，屏幕触碰事件采样点变少，变慢。此时画一个圆变成一个多边形。