收藏
回答

canvas绘制多个不同大小和颜色的文本时,文本的颜色和字体大小会混乱

框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 canvas canvasContext.setFontSize canvasContext.setFillStyle 客户端 Android 6.6.5 1.9.91

canvas里面绘制多个不同字体大小、颜色的文本,在调试工具里面没有问题,在手机端会偶尔会出现文字大小和颜色混乱的情况

部分代码如下所示:

context.setTextAlign('left');


var text = that.data.userinfo.nickName;

context.setFontSize(18);

context.setFillStyle('#666666');

context.fillText(text, 75, 53)

context.save();

context.restore();


var User1Text2 = "我已参加这个代言活动,邀你一起加入!";

context.setFontSize(15);

context.setFillStyle('#666666');

context.fillText(User1Text2, 75, 77)

context.save();

context.restore();


var title = this.data.title;

context.setFontSize(24);

context.setFillStyle('#000000');

if (title.length > 11) {

var desc01 = title.substring(0, 13);

var desc02 = title.substring(13, 26);

context.fillText(desc01, 18.5, 135)

context.save();

context.restore();

context.fillText(desc02, 18.5, 165)

context.save();

context.restore();

} else {

context.setFontSize(24);

context.save();

context.restore();

}


绘制出来的效果如下图所示,第一张是乱的,第二张是正常的,求解答




回答关注问题邀请回答
收藏

16 个回答

  • 黄思程
    黄思程
    2018-05-08

    麻烦9楼提供个代码片段看一下 (https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/minicode.html)

    2018-05-08
    有用
    回复 10
    • 92房丶
      92房丶
      2018-05-18
      wechatide://minicode/1KbmOvm76cZl 麻烦看一下 小米6 MIUI 9 8.5.8 微信版本:6.6.6 你点100次 会有那么几次复现,我点了一下午 相信我兄弟 安卓下肯定有问题
      2018-05-18
      回复
    • 92房丶
      92房丶
      2018-05-18
      https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=2064999527&docid=000e6afc014b5041678675b8258c00 看下这个 也是再说这个问题
      2018-05-18
      回复
    • 92房丶
      92房丶
      2018-05-24
      解决了么 大佬?
      2018-05-24
      回复
    • 92房丶
      92房丶
      2018-05-28

      你好,解决了么

      2018-05-28
      回复
    • 君莫笑。
      君莫笑。
      2018-06-11回复92房丶

      看来是没解决

      2018-06-11
      回复
    查看更多(5)
  • 黄思程
    黄思程
    2018-03-22

    我这边不能重现呢。有重现路径吗

    2018-03-22
    有用
    回复
  • 黄思程
    黄思程
    2018-03-16

    麻烦给个相关的代码片段(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/minicode.html),我们定位下问题

    2018-03-16
    有用
    回复
  • 不讨喜~
    不讨喜~
    2018-03-28

    我这边是oppo r11体验版出现了这种问题,出现的几率很高。

    错误的:



    正确的:



    2018-03-28
    有用 2
    回复 1
    • 2023Passion
      2023Passion
      2018-06-13

      最后问题解决了吗

      2018-06-13
      回复
  • 豌豆
    豌豆
    2023-08-17

    都 2023年的,这个bug还存在

    2023-08-17
    有用
    回复
  • 种子的信仰
    种子的信仰
    2021-05-28

    2021年5月, 这个问题又出现了,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, 前段时间都没事的, 偶现, 10次有两三次会出现问题

    加setTimeout解决了

    ctx.draw(true() => {
     // setTimeout 为了解决微信小程序文字样式会错乱的bug!!
     setTimeout(() => {
      // code...
     }, 100);
    });
    
    2021-05-28
    有用
    回复
  • 123👑
    123👑
    2018-06-14

    曹 我也是到现在都没有解决方案啊。。

    2018-06-14
    有用
    回复
  • 友人w
    友人w
    2018-06-05

    我也碰到了这个bug 标题文字和下面的信息介绍 不定期会置换属性,标题本来是红色的大号字体有时候就变成下面的小号灰色字体

    2018-06-05
    有用
    回复
  • 贾懂凯(铁眉)、
    贾懂凯(铁眉)、
    2018-06-01

    一样的问题,没辙,只能等官方更新

    2018-06-01
    有用
    回复
  • Jeannette
    Jeannette
    2018-05-09

    我也遇到了。。。。。楼上。。。。

    2018-05-09
    有用
    回复

正在加载...

登录 后发表内容