[已解决]canvas性能问题

时间：2019-05-07 来源：小程序工厂

问题模块框架类型问题类型 API/组件名称终端类型微信版本基础库版本
API和组件微信小程序 Bug canvas 客户端 6.7.3 2.3.0 [177]

真机运行项目时（双端都是），随着时间的递增运行越来越卡，但是PC端就不会那么明显，哪里写错了吗？

代码片段
wechatide://minicode/7TB3UlmN7J3w

微信小程序开发问题解答

微信小程序开发者回答：

获取数据你可以开个worker线程，应该是不存在运行时间越久越卡顿这种情况的

微信小程序开发者回答：

https://developers.weixin.qq.com/s/Krp10nmn7H3k主要优化两点 1. 使用 requestAnimationFrame 进行帧绘制，能保证在绘制耗时比较大的情况下自动降帧而不丢帧。即使是使用 setTimeout 也尽量不要使用 setInterval，setInterval 会在计时器触发时直接执行，而这时上一帧的绘制过程可能因为某些原因还未完毕。
2. storke, clear, draw 的过程尽量在每一帧绘制时一次性执行。

微信小程序开发者回答：

谢谢，我试试

微信小程序开发者回答：

还有就是，这段代码的意义我没明白
直接这样，效率还会更高

微信小程序开发者回答：

核心就是，单帧内减少 Canvas API 调用次数

微信小程序开发者回答：

requestAnimationFrame只有小游戏的canvasAPI才有吧？

微信小程序开发者回答：

那段代码是绘制8个点

微信小程序开发者回答：

哇这示波器效果~
你12条线路是单独画的，每条线路会有单独的定时器，但是事件处理队列是同一个，也就是相当于是系统有3ms来完成一截图的绘制。。手机上性能远不如PC（龙芯机器除外）。。如果每条线的进度可以是一样的，能不能试试用一个定时器来做，每次画这一竖条下来

微信小程序开发者回答：

用一个定时器绘制一条线也会卡

微信小程序开发者回答：

在你的真实情况里，这个些数据是一开始就有一个时间段的，还是实时获取的呢？

微信小程序开发者回答：

项目里面是根据蓝牙设备返回来的数据实时显示波形的，但是现在来看获取数据就已经很耗费性能了到时候在绘制这个动画我感觉可能会卡蹦程序现在在考虑如何优化

微信小程序开发者回答：

能不能用俩canvas
一个把源数据画线，做成临时文件的图。。这个canvas通过绝对定位隐藏起来。。
一个把生成的图拿来移动显示

微信小程序开发者回答：

现在不是移动的问题我感觉像是canvas绘制的太久就会变卡

微信小程序开发者回答：

是啊，所以每次都把整个画布清了，然后画图上去啊

微信小程序开发者回答：

我先试试每次绘制的时候都清一次画布会不会好一些

微信小程序开发者回答：

我是觉得，画固定的图，要比每次画多段快吧

微信小程序开发者回答：

昨天测试了一天，最终结果就是绘图频率越快，时间越久，卡顿越明显，好忧桑

微信小程序开发者回答：

试试web-view里的canvas画呢？

微信小程序开发者回答：

数据没办法传过去感觉你好厉害什么都懂

微信小程序开发者回答：

额。。还差得远得很呢。。社区里大概有80%问题，答不上
数据可以通过后台转一遍呀~ 而且以后说不定也要做web版本啊~

微信小程序开发者回答：

数据是实时显示的数据是毫秒级显示的没法从后台获取过来无法连接蓝牙设备没法获取数据所以 web版应该不会出出了也没多大意义主要功能还是在app上我感觉微信小程序上实现这个功能都有些多余

微信小程序开发者回答：

这样的啊，也是，微信小程序嘛，就不应该做太重。。

本文网址：http://www.91bianli.com/kaifazhinan/76083.html

上一篇：[已解决]相机连续扫码条形码，摄像头苹果能识别

下一篇：[已解决]微信小程序开发两个按钮调用同一事件，