微信小程序真机 canvas 2d 二次重绘时,弧形进度条变形

更新日期: 2020-09-12 阅读次数: 176 字数: 653 分类: 微信小程序

在微信小程序中使用 canvas 绘制了一个弧形进度条。

微信小程序真机中 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 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

tags: 小程序 canvas 2d

相关文章

爱评论不评论

近期节日

2020年10月01日 国庆节
2020年10月01日 中秋节
2020年10月04日 世界动物日
2020年10月08日 寒露
2020年10月09日 世界邮政日
2020年10月10日 辛亥革命纪念日
2020年10月13日 中国少年先锋队诞辰日
2020年10月14日 世界标准日
2020年10月15日 国际盲人节
2020年10月16日 世界粮食日
2020年10月17日 国际消除贫困日
2020年10月22日 世界传统医药日
查看更多节日