看看我是如何压榨 canvas 性能的

[moohng]

继上一贴 https://www.v2ex.com/t/830653#reply27，本来只是分享一下我的第一个小程序的喜悦，没想到关注的人还挺多的，同时也提出了一大推的问题。

问题比较严重的的就是“画布上面的东西多了之后，清除、撤销、换背景等操作会非常的慢”，然后我自己也找到了问题的原因所在，现在分享一下我的解决思路，供大家参考，如果有更好的方法，欢迎大佬们不吝指教：

1. 切换背景慢：我将背景图层从 canvas 中分离了出来，在底部搞了一个view，现在切换背景颜色的时候不会重新渲染 canvas ；

2. 撤销慢：主要是我之前的处理方法不当，后面发现了 canvas 的上下文中其实已经提供了一个强大的方法ctx.getImageData 和 ctx.putImageData，从方法名很容易就能看出，是生成图像数据相关的东西。然后我每次在一个动作完成之后touchend，将当前画布上的内容保存起来，然后每次撤销的时候，取列表中上一步的ImageData重新渲染在画布上。现在不管画布上面多复杂，基本上不会卡顿了。

不过在ctx.getImageData的时候其实还有优化空间，步骤多了之后，占用内存可能会有点大，由于时间有限，也快过年了，只能等年后优化了。

再放上我的小程序码，欢迎大家体验，然后提出宝贵的意见

具体优化细节，等年后整理一下源码，给大家分享出来

现在还坚守在公司摸鱼的大佬们，提前祝大家新年快来！加薪！加薪！！加薪！！！最重要的是脱单😅😅😅😅

在今年最后时刻，将内存占用的问题解决了，ImageData 这个东东太占内存了，目前限制了历史记录最多为 10 ，不然几下内存就爆满了

不知道有没有什么办法从其他方面入手，将 ImageData 存本地？感觉也不太好，先不想了，回家过年去了😀😀😀😀

[marcong95]

好奇一下，小程序的 Canvas 的 ctx 有 get/putImageData 吗？ uni-app 那个自称与小程序兼容的框架没有这两个方法来着，我看微信的文档只有 wx.canvasGetImageData ，而且还是异步的，导致 echarts 部分图表不能兼容，有点悲伤。

[moohng]

@marcong95 uni 那边确实还没有更新，微信官方已经更新了，api 跟 web 端保持一致，直接用微信那边的 api 获取 ctx 就行

[jones2000]

小程序 get/putImageData 是异步的， 而且图片大直接就报错。 根本就不能。uni 就更不用说了，canvas 卡的要死， 全是异步执行，都不知道开发的人怎么想的，就现在手机的性能还搞异步。

[marcong95]

@moohng #2 原来如此，那我坐等一波 uni-app 跟进~~

[moohng]

@jones2000 从这几天体验来看，小程序的 canvas 的性能确实不如 html 里面的 canvas 。我生成的 h5 端代码，感觉比小程序端的更流畅一些

[SmiteChow]

建议将压榨改成优化

[moohng]

@SmiteChow 哈哈，用词不当，接受批评

[DSKcpp]

@moohng 小程序的原理造成就是会有延迟，native 触摸传给 service ，service 再把绘制信息传给 native 层的 skia 渲染，中间多了 2 次通信