小程序
小游戏
企业微信
微信支付
扫描小程序码分享
开始用画笔画图时不卡,画的多了开始卡。清除画布后继续画,还是卡,越来越卡。不知道是什么问题?
1.清除画布:
canvasContext.clearRect(0, 0, width, height);
canvasContext.draw();
7 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
小程序canvas在画图时重复使用canvasContext.draw(true)后界面就会经常出现漏帧、卡顿等现象。我的解决办法:在重头绘制canvas时调canvasContext.draw(false)。但是如果一个一直需要保存绘图轨迹的canvas,怎么才能解决它调用canvasContext.draw(true)导致的卡顿问题呢?
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
同遇到类似问题,关键我小程序没迭代,以前不卡现在卡.....这就很尴尬了
卡顿的原因我遇到的有两个:1是一个页面用了多个canvas;2是算法不合理
还有就是绘制的时候,将获取到的坐标点放进数组中,这样方便使用删除
例:
// 手指触摸动作开始
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 };
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是算法不合理
还有就是绘制的时候,将获取到的坐标点放进数组中,这样方便使用删除
例:
// 手指触摸动作开始
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)
}
因为在你绘制的过程中,获取到的坐标点一直缓存在你的手机上,手机的内存是有限的,而这是非常的耗内存的。所以你在绘图的过程中需要把你用过的、不需要的坐标点清空删除
遇到相同问题,在真机上画多了确实会非常卡。楼主解决了吗?
你说的没错,最简单的绘画画多了也会有延迟,采样点变少的问题。
画一段时间后,屏幕触碰事件采样点变少,变慢。此时画一个圆变成一个多边形。