收藏
回答

在canvas上使用clip()画圆形头像,但是在真机上无法显示出来

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 工具 6.7.3 2.2.5

- 当前 Bug 的表现(可附上截图)

用canvas画圆形头像使用clip()剪切,在真机上不显示

- 预期表现

出现图片    编辑器上的显示


- 复现路径


- 提供一个最简复现 Demo

const ctx = wx.createCanvasContext("canvasId");

ctx.arc(headImgWidth / 2 + 30, headImgHeight / 2 + 53, headImgWidth / 2, Math.PI * 2, false);

ctx.clip();

ctx.drawImage('/img/gem.jpg', 30, 53, headImgWidth, headImgHeight);

ctx.restore();

ctx.draw();




最后一次编辑于  2018-12-25
回答关注问题邀请回答
收藏

6 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2018-12-25

    请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-12-25
    赞同
    回复
  • 愤怒的小鸟
    愤怒的小鸟
    12-04

    到底能能解决啊

    12-04
    赞同
    回复
  • 呼呼
    呼呼
    02-15

    +1

    02-15
    赞同
    回复
  • 川川川
    川川川
    01-08

    我在使用ctx.clip()后调用ctx.drawImage在模拟器上可用,在真机上不显示图片,我保证图片已经下载在本地了


    01-08
    赞同
    回复 3
    • 凯
      01-09

      一样的问题, 后面我是让后台弄好之后返回给我的

      01-09
      回复
    • 川川川
      川川川
      01-09回复

      我的是因为ctx.clip()区域使用的fill颜色是transparent透明,所以图片没出来,设置成实体颜色就好了

      01-09
      回复
    • 凯
      01-10回复川川川

      我还是在真机上没有调试出来

      01-10
      回复
  • WeiLoong·M🌟
    WeiLoong·M🌟
    2018-12-26

    请问楼主,问题有没有解决问题啦?

    圆形头像绘制需要下载到本地,才能在真机上绘制成功。我是可以的,希望有用!

    2018-12-26
    赞同
    回复 2
    • 凯
      2018-12-26

      没有解决 ,  暂时先放一边了  , 做完其他的再弄。

      2018-12-26
      回复
    • 不易
      不易
      04-04

      我是先把头像downLoadFile下来,再绘制圆形头像的,这样也不行,能告知下您的操作方法吗?

      04-04
      回复
  • 凯
    2018-12-25

    https://developers.weixin.qq.com/s/ggji2Vmk7W4J

    这个是代码片段 ,我使用的测试机是小米8

    2018-12-25
    赞同
    回复