在微信小程序中使用 canvas 绘制了一个弧形进度条。
问题现象
- 首次绘制时，一切正常
- 再次进入页面，onshow 时再次绘制，会出现右下角出现一段奇怪的曲线
但是，这个问题只在真机上能够出现，在本地开发工具上一切正常。
问题定位
这个问题困扰了我几天，一直没有找到问题出在哪里。我一度怀疑是微信小程序的 canvas 2d 有 bug 导致。但是即便使用原始的非 2d 版本实现，问题依旧。
同时，在网上查到的代码 demo，都没有提交类似的 bug。所以，问题很大概率还是出在我自己的代码这里。
我仔细观察了一下，这个诡异的右下角图形，非常像是放大版的弧形曲线的一部分。于是，我怀疑二次绘制的时候，时间上另起了一个圆心，重绘了另一条曲线。
于是，在日志中打印了圆心的坐标，但是，重复调用时显示，这个坐标并没有任何变化。
既然，圆心没有变化，那还能是哪里发生了变化。。。
此刻，我看到了一行诡异的代码：
ctx.scale
从名字上看是进行了拉伸。莫非反复调用时，这个 scale 被进行了成倍扩大，而并没有被重置？
经测试，果真如此。。。这绝对是微信小程序的一个 bug。
不得已，采用了一个全局变量来标识 ctx.scale 是否调用过，如果调用过，就不再执行此行。
至此问题解决。
这真是一个毫无意义的 bug 解决过程。
之后，我在微信小程序官方论坛里找到了几个完全一样的问题，估计官方选择了忽视。
https://developers.weixin.qq.com/community/develop/doc/000a2c5def48a8da817abf2ea51000?_at=tdjfeehau
小程序中调用 canvas scale 的目的是什么？
我实在是没有兴趣去理解这个问题了，我觉得这就是微信开发团队自己偷懒的结果。封装的非常弱智。
经验教训
凡是会被重复调用的代码，尽量把初始化部分独立出来，避免反复调用。这样的好处是：
- 减少了重复初始化带来的性能损耗，给用户省点电吧
- 避免踩 canvas scale 类似这种浪费生命的坑
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式