canvas画图画的越多越卡
发布于 5 年前 作者 lxue 16174 次浏览 来自 问答

开始用画笔画图时不卡,画的多了开始卡。清除画布后继续画,还是卡,越来越卡。不知道是什么问题?

1.清除画布:

canvasContext.clearRect(0, 0, width, height);

canvasContext.draw();

7 回复

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

例:

// 手指触摸动作开始

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是算法不合理

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

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

回到顶部