收藏
回答

CanvasContext.arc/clip画圆形头像,切不完整

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug CanvasContext.arc 客户端 7.0.3 2.6.1

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


- 预期表现

头像应该切成圆的啊。不知道是CanvasContext.arc的问题还是CanvasContext.clip的问题还是啥问题

- 复现路径


- 提供一个最简复现 Demo




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

3 个回答

  • 邱一欢
    邱一欢
    2019-03-05

    你在 ctx.clip() 前面先调用下ctx.fill() 试试


    2019-03-05
    有用 1
    回复 2
  • Alan#
    Alan#
    04-20
    context.save()
      context.moveTo(x, y + r)
      context.arc(x + r, y + r, r, 0, 2.1 * Math.PI)
      // context.fill(); //无效
      // context.closePath()//无效
      context.clip()
      context.drawImage(img, x, y, 2 * r, 2 * r)
      context.restore()
    

    moveTo将画笔移动到你绘制到起点上。

    04-20
    有用
    回复
  • 想太多
    想太多
    2019-03-05

    还有官方能不能出一个将页面绘制成canvas以便分享到朋友圈的组件啊?感觉这需求还是挺常用的,由canvas功底不好的自己来写还真的是痛苦

    2019-03-05
    有用
    回复
登录 后发表内容