开始用画笔画图时不卡,画的多了开始卡。清除画布后继续画,还是卡,越来越卡。不知道是什么问题?
1.清除画布:
canvasContext.clearRect(0, 0, width, height);
canvasContext.draw();
还有就是绘制的时候,将获取到的坐标点放进数组中,这样方便使用删除
例:
// 手指触摸动作开始
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)
}