小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)

9月前作者：huihttp 分类：Toy博客阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

起因

因为要做一个画画板的功能，所以使用了canvas组件，一开始好多人说小程序canvas性能特别差，也没太注意，做出来之后确实有点卡，而且每一笔touchmove时间越长越卡，最终导致页面卡到无法使用,起初我也以为是canvas卡。

开始找原因

canvas优化

第一步肯定是先找一下canvas的问题，网上搜到一些材料优化canvas的思路，无非就是以下几种，详细的可以参考我的另一个文章

绘制的图形的数量和大小会影响canvas的性能，减少绘制物，减少绘制指令

图形数量过多，但是只刷新部分可以使用局部渲染

逻辑层和背景图层分离可以使用分层渲染

某些长时间的逻辑影响主线程的，可以使用离屏渲染和webworker 来解决问题

这里做了两个优化：

禁用滚动，一开始一直卡的不行，后来查资料发现滚动跟touchmove事件有冲突，禁用之后好了许多
将ctx.stroke()指令放到定时器中执行，每50ms执行一次，这样就是一个固定频率执行，不会因为频繁触发touchmove导致ctx.stroke()一秒钟执行几百几千次

经过处理，这些已经好了很多，但是当绘画事件变长时还是会变得越来越卡，直到最后卡的，动不了，延迟十几秒那种，所以继续找问题文章来源地址https://www.toymoban.com/news/detail-498528.html

<

到了这里，关于小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

【VRTK】【Unity】【PICO】PICO项目打包后闪退的根本原因

一开始打包运行好好的PICO项目，中途用Preview模式开发了一阵后，再次打包就闪退了。项目设置没有动过，那么可能是Preview开发过程中引入的包导致的问题。千万不要在PICO项目中导入Oculus包。我原本想用一些Oculus包内的Assets资源，所以导入了Oculus，现在叫Meta的开发SDK包，经

2024年01月22日
浏览(122)
IDEA编译报错：Error:java: 无效的源发行版: 17的根本原因

1.本机默认使用（编译）的jdk与该项目所使用的jdk版本不同。(造成这个原因就是因为在创建项目的时候，idea默认是使用的最新版本进行快速构建的) 2.jdk版本不适用于这个Idea，很典型的一个例子就是使用的Idea是2020的，而你用到的jdk是17，jdk17是2021年推出的，所以你只能去安装

2024年02月07日
浏览(44)
微信小程序安卓视频播放卡顿问题

在微信小程序开发中遇到在video组件的两个问题刚开始以为是网络问题，或者是视频文件问题。排查了一下发现都没问题最后加了个属性就OK了 uniapp和原生小程序方法 video组件兼容iOS手机 custom-cache加了这个属性会让因此我加了当前手机型号的判断获取当前设备api 当为iPho

2023年04月16日
浏览(41)
微信小程序优化多次跳转后卡顿问题

一、微信小程序多次跳转会产生卡顿的原理通过wx.navigateTo 跳转，都会出现保留当前页面，打开新的页面机制。 wx.navigateTo不会将旧页面出栈，会将新页面入栈(栈内元素个数增加，栈内元素5个时，不能再跳转)。手机性能好点，可能10次左右才会导致小程序跳转卡顿崩溃。二

2024年02月11日
浏览(133)
微信小程序手写签字版

在这里插入图片描述请在下面的白框中签名重置提交 # js Page({ data: { signPath: [], cardNo: \\\'\\\', preX: \\\'\\\', preY: \\\'\\\', }, onLoad(options) { this.setData({ cardNo: options.cardNo }) wx.createSelectorQuery().select(\\\'#myCanvas\\\').fields({ node: true, size: true }).exec(this.init.bind(this)) }, init(data) { console.log(data); const width = dat

2024年02月12日
浏览(36)
微信小程序实现左右滑动进行切换数据页面（touchmove）

手指触摸左右滑动进行切换数据需要实现的是有一个tab栏,点选某一个tab的时候切换页面，手势滑动，左滑右滑效果和点击tab一样切换页面数据。这里我们要先了解几个微信的事件属性 touchstart ：手指触摸动作开始 touchmove：手指触摸后移动 touchcancel：手指触摸动作被打断，

2024年02月11日
浏览(63)
自己架设的传奇会卡顿、掉线是什么原因？传奇卡顿怎么解决？

因为平时接触传奇的用户比较多，所以也会遇到架设的传奇出现卡顿、掉线的情况，这究竟是为什么呢？飞飞总结了以下原因和解决方案希望可以帮助到你~ 首先我们结合情况来，刚架设好的服，测试时就遇到了卡顿、掉线的情况，大概率是和游戏设置有关系的，我们可以先

2024年02月15日
浏览(151)
直播卡顿原因详解及优化

随着视频直播的发展，很多直播团队可能会遇到视频直播卡顿，频繁出现缓冲标志或者直播画面一卡一卡等情况。究竟是哪些原因造成了视频直播观看的卡顿情况呢？又拍直播云结合实践经验，从设备、视频流、网络这三方面进行解剖分析造成直播卡顿的问题及其解决方法。

2024年02月03日
浏览(31)
服务器卡顿怎么查找原因？

虽然服务器出现卡顿的现象比较少见，但也不排除出现的可能，而服务器一旦出现卡顿，造成的后果会严重的多。这里分享点笔记，希望有所帮助 1. 性能评估: 首先，对服务器的性能进行全面评估。检查 CPU 使用率、内存占用、磁盘读写速度等关键性能指标，确认是否存在明

2024年02月11日
浏览(50)
蓝牙模块传输音频出现卡顿原因分析

蓝牙模块传输音频出现卡顿原因分析作为一个在无线蓝牙技术行业工作10年+的硬件工程师，整理一些蓝牙模块传输音频出现卡顿原因的分析仅供大家参考：一、天线方面天线性能直接影响到蓝牙型号的发射强度，一般来说蓝牙音频传输有效的使用范围是10-15米，实际使用一

2024年02月01日
浏览(55)