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

更新日期: 2020-09-12 阅读次数: 3720 字数: 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