这是一个创建于 1016 天前的主题，其中的信息可能已经有所发展或是发生改变。
继上一贴 https://www.v2ex.com/t/830653#reply27，本来只是分享一下我的第一个小程序的喜悦，没想到关注的人还挺多的，同时也提出了一大推的问题。
问题比较严重的的就是“画布上面的东西多了之后，清除、撤销、换背景等操作会非常的慢”，然后我自己也找到了问题的原因所在，现在分享一下我的解决思路，供大家参考，如果有更好的方法，欢迎大佬们不吝指教：
-
切换背景慢：我将背景图层从 canvas 中分离了出来，在底部搞了一个
view，现在切换背景颜色的时候不会重新渲染 canvas ； -
撤销慢：主要是我之前的处理方法不当，后面发现了 canvas 的上下文中其实已经提供了一个强大的方法
ctx.getImageData和ctx.putImageData，从方法名很容易就能看出，是生成图像数据相关的东西。然后我每次在一个动作完成之后touchend，将当前画布上的内容保存起来，然后每次撤销的时候，取列表中上一步的ImageData重新渲染在画布上。现在不管画布上面多复杂，基本上不会卡顿了。
不过在ctx.getImageData的时候其实还有优化空间，步骤多了之后，占用内存可能会有点大，由于时间有限，也快过年了，只能等年后优化了。
再放上我的小程序码，欢迎大家体验，然后提出宝贵的意见
具体优化细节，等年后整理一下源码，给大家分享出来
现在还坚守在公司摸鱼的大佬们，提前祝大家新年快来！加薪！加薪！！加薪！！！最重要的是脱单😅😅😅😅
第 1 条附言 · 2022-01-28 17:33:06 +08:00
在今年最后时刻，将内存占用的问题解决了，ImageData 这个东东太占内存了，目前限制了历史记录最多为 10 ，不然几下内存就爆满了
不知道有没有什么办法从其他方面入手，将 ImageData 存本地？感觉也不太好，先不想了，回家过年去了😀😀😀😀
不知道有没有什么办法从其他方面入手，将 ImageData 存本地？感觉也不太好，先不想了，回家过年去了😀😀😀😀
 |
1
marcong95 2022-01-28 09:51:39 +08:00
好奇一下，小程序的 Canvas 的 ctx 有 get/putImageData 吗？ uni-app 那个自称与小程序兼容的框架没有这两个方法来着，我看微信的文档只有 wx.canvasGetImageData ，而且还是异步的，导致 echarts 部分图表不能兼容，有点悲伤。
|
 |
2
moohng OP @marcong95 uni 那边确实还没有更新，微信官方已经更新了，api 跟 web 端保持一致，直接用微信那边的 api 获取 ctx 就行
|
 |
3
jones2000 2022-01-28 10:26:14 +08:00
小程序 get/putImageData 是异步的， 而且图片大直接就报错。 根本就不能。uni 就更不用说了，canvas 卡的要死， 全是异步执行，都不知道开发的人怎么想的，就现在手机的性能还搞异步。
|
|
5
moohng OP @jones2000 从这几天体验来看，小程序的 canvas 的性能确实不如 html 里面的 canvas 。我生成的 h5 端代码，感觉比小程序端的更流畅一些
|
 |
6
SmiteChow 2022-01-28 10:52:47 +08:00
建议将压榨改成优化
|
Select Language