是这样的客户有个需求，要一个手写签名的功能。 就想到了用canvas来实现。 一开始没什么问题， 最近客户一直反馈，在签名的时候，会出现卡顿的问题，体验不好。 可我们这边手机的几部手机安卓 ios 都不会感觉到卡顿的现象。 这个可能会是什么问题引起的呢？ 有没有带佬遇到过呢？求助一下
5***@qq.com
- 发布：2020-12-21 12:09
- 更新：2021-01-21 09:11
- 阅读：1756
k***@sina.com - unclex
我不知道你是怎么实现的，如果是这样：
在move事件中只使用
ctx.lineTo(e.clientX, e.clientY - 85);
ctx.stroke();那么就有问题，因为stroke()会对这条line的所有轨迹做填充。就是他画了1万个点，那么就填充1万条line。为了兼顾效率，可以设置一个阈值，到了阈值之后就beginPath，开一条新的line。
-
5***@qq.com (作者)
阿这... 看了一下 确实是用"ctx.lineTo(x, y);ctx.stroke();" emm... 重新开一条line 这个是怎么做呢？ 直接beginPath 然后再"ctx.lineTo(x, y);ctx.stroke();" ？ 求dailao指点迷津
2021-01-30 18:01
-
回复 5***@qq.com: 你说的基本正确。
document.addEventListener("pointermove", e => {
if (!paint) return;
e.preventDefault();
e.stopPropagation();
ctx.lineTo(e.clientX, e.clientY - 85);
ctx.stroke();
if (points++ > 100) {
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY - 85)
points = 0;
}
})2021-01-30 22:56
-
5***@qq.com (作者)
这个不行，其实我也觉得有可能是手机本身的问题。
2020-12-23 08:35