canvas绘制大量数据卡顿 - WXOPEN Club | 微信小程序专业社区

代码片段：

wechatide://minicode/ROIdcdmz712p

代码片段中 canvas 绘制开发工具下可一直保持流畅（我运行了 5-6 分钟），同样的代码在 web（微信浏览器）流畅运行。

真机下，大概 10 秒就会降到 30 fps，然后大概1分钟不到就会降到 1-2 fps。

虽说可以通过 canvasToTempFilePath 保存已经绘制的内容再重绘图片来降低卡顿，但是操作起来会很麻烦，而且可能会造成绘制丢失

所以想了解下这是什么问题，有没有更好的解决方法？

另外有个小疑惑，原生 canvas 为什么比 web 要卡，用原生 canvas 实现有什么意义？

Thanks for your time!

7 回复

tdai1 楼6 年前

确实会有这个问题，我也碰到过

不知道楼主是啥场景下用canvas ，如果是要导出图片的原因，可以使用view布局，界面呈现动画使用view,将canvas组件定位到屏幕看不见的位置，当动画停止后，再在canvas上绘图就可以了

我是的小项目是这样做的，可以参考下

wei212 楼6 年前

小程序封装的canvas绘图api确实会有不小的问题。

首先和原生的同步api不同，新增了异步的draw方法，这个方法提供了一个不太靠谱的callback参数，这个回调在一些场景下会miss。

其次，draw方法的第一个参数reserve，在为true时会有记录之前所有绘制内容的功能，在每次调用时会把历史栈内的所有data都拿出来绘制一遍，这在连续绘制(比如魔方画笔拖动)的实现里就是个灾难。

另外，同样基于异步实现的imageData的相关api也存在着性能和失真的各种问题。

于是目前最好的解决办法就是，

使用webview，在网页里愉快得用原生的canvas。

uguo3 楼6 年前

之前试过draw(true)，性能很差。后面改成draw()，每次都重绘全部，反而不卡。

jingmo4 楼6 年前

欢迎体验，也使用了canva绘图，还行不是特卡顿，吐槽吧

lwen5 楼6 年前

可以考虑下在服务端生成图片啊

weijin6 楼6 年前

你这个是要越画越快，越来越频繁吗？

lzhao7 楼5 年前

怎么访问wechatide://minicode/ROIdcdmz712p 这个