收藏
回答

小程序canvas切圆角矩形android存在兼容问题

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug Android 7.1.1 所有android 6.6.6




图1是ios的效果,图2是android的效果,图3是代码片段,求canvas大神指点

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

20 个回答

  • 视频号小店技术助手 - cunjin
    视频号小店技术助手 - cunjin
    2018-04-28

    楼主你好,我这里有一份画圆角的代码,在android上测试ok的,请参考

    roundRect1: function (x, y, w, h, r) {

    // 开始绘制

    const ctx = this.ctx

    ctx.beginPath();

    this.ctx.setFillStyle('#ffffff');

    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);


    ctx.moveTo(x + r, y);

    ctx.lineTo(x + w - r, y);

    ctx.lineTo(x + w, y + r);


    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);


    ctx.lineTo(x + w, y + h - r);

    ctx.lineTo(x + w - r, y + h);


    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);


    ctx.lineTo(x + r, y + h);

    ctx.lineTo(x, y + h - r);


    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);


    ctx.lineTo(x, y + r);

    ctx.lineTo(x + r, y);

    this.ctx.fill();

    this.ctx.setGlobalAlpha(0.04);

    this.ctx.setShadow(0, 2, 4, '#000000')

    ctx.closePath();

    this.ctx.draw(true)

    return this;

    }


    2018-04-28
    有用 1
    回复 2
    • Liro~(源龙)
      Liro~(源龙)
      2018-11-21

      使用ctx.lineTo +  ctx.arcto就能避免android错误,android只使用ctx.arcto不兼容!!!

      2018-11-21
      回复
    • 👉🙈
      👉🙈
      2019-06-04

      一年过去了,我也遇到了同样的问题,在开发者工具和苹果手机以及部分安卓手机可以显示,小米 华为等手机显示不了




      2019-06-04
      回复
  • 吃不胖的杨同学
    吃不胖的杨同学
    01-24

    2024了问题还在,微信不知道整天在干什么

    01-24
    有用
    回复
  • 镯子
    镯子
    2023-08-25

    2023年 依然如此

    2023-08-25
    有用
    回复
  • 💧
    💧
    2021-09-09

    什么时候有个交流的入口,目前这个社区的交流效率太低了

    2021-09-09
    有用
    回复
  • 阿噗
    阿噗
    2020-09-16

    真尼玛吐血 ,画了个大转盘在ios正常,安卓全走样,我吐了

    2020-09-16
    有用
    回复
  • 2020-04-26

    2020年4月,问题依然存在

    2020-04-26
    有用
    回复
  • 洞天水月
    洞天水月
    2019-12-11

    问题依旧存在

    2019-12-11
    有用
    回复
  • 心欲无痕
    心欲无痕
    2019-08-13

    都9102年了,bug还没修复。这办事效率杠杠的。。

    2019-08-13
    有用
    回复
  • 地瓜
    地瓜
    2018-09-11

    same question

    2018-09-11
    有用
    回复
  • 2018-06-26

    mark ,希望修复的时候通知一下

    2018-06-26
    有用
    回复

正在加载...

登录 后发表内容