canvas绘制大量数据卡顿
发布于 6 年前 作者 juan91 17805 次浏览 来自 问答

代码片段:

wechatide://minicode/ROIdcdmz712p

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

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

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

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

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

Thanks for your time!

7 回复

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

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

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

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

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

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

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

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

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

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

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

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

你这个是要越画越快,越来越频繁吗?

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

回到顶部