满脑的思绪
满脑的思绪
  • 发布:2020-11-12 14:00
  • 更新:2021-01-21 09:11
  • 阅读:1881

【报Bug】Canvas 卡顿

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.7

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: Mate 10 Pro

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

怎么着都存在

预期结果:

不卡顿

实际结果:

卡顿 非常卡的那种

bug描述:

Canvas画图时,画的线条多之后出现明显卡顿;最后导致无法渲染;
组件:Canvas
API:CanvasContext

使用场景:使用Canvas做手写轨迹,大约有上万个点数据。

2020-11-12 14:00 负责人:无 分享
已邀请:
chenli

chenli

使用canva 2d同层绘制,来解决卡顿问题

k***@sina.com

k***@sina.com - unclex

我不知道你是怎么实现的,如果是这样:
在move事件中只使用

                ctx.lineTo(e.clientX, e.clientY - 85);  
                ctx.stroke();

那么就有问题,因为stroke()会对这条line的所有轨迹做填充。就是他画了1万个点,那么就填充1万条line。为了兼顾效率,可以设置一个阈值,到了阈值之后就beginPath,开一条新的line。

该问题目前已经被锁定, 无法添加新回复