收藏
回答

微信canvas画圆角图为何在开发工具上显示正常,真机样式无效,该如何画处理?

社区中关于canvas有其他的问题解决或没有解决不在此一一缀述,最近在使用小程序写canvas的确遇见一些抓破头皮的坑,还请各路大神显神通,救救弟弟!

问题简述:canvas的圆角真机不显示

业务需求:使用canvas画头像,带有圆角

效果图:

问题描述:

设置canvas所在view为圆角,canvas设置为圆角,在开发工具显示正常,安卓真机预览样式无效。

使用canvas画图片为圆角,只有左上角画出来是圆角,其余角均直角,样式无效,开发工具上也不显示。




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

1 个回答

  • 卢霄霄
    卢霄霄
    2019-10-15

    用clip做

    2019-10-15
    有用
    回复 3
    • 俗人
      俗人
      2019-10-15
      // // 开始绘制
          // ctx.beginPath()
          // 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);
          // ctx.closePath()
          // // 剪切
          // this.ctx.clip()
      2019-10-15
      回复
    • 俗人
      俗人
      2019-10-15
      只会显示左上角圆形,请问是代码写的有问题吗
      2019-10-15
      回复
    • 卢霄霄
      卢霄霄
      2019-10-15回复俗人
      光是这一段看着没问题,方便做个代码片段吗
      2019-10-15
      回复
登录 后发表内容
问题标签