收藏
回答

【BUG反馈】canvas中clip截取多张图片失效的问题

问题模块 审核类型 框架类型 问题类型 提审时间 AppID
审核 代码审核 小程序 Bug 05-29 wxcd8565e3fba64695

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




第二次clip裁切圆形失败,没有圆形裁切效果


在canvas 中 clip裁切这个功能,如果有超过一张图片/背景叠加,则裁切效果失效。


- 预期表现

- 复现路径


再次使用clip

- 提供一个最简复现 Demo


let ctx = wx.createCanvasContext('myCanvas');
ctx.clearRect(0, 0, 320, 480); //清空画板
 
//第一次用clip() 裁切一个圆形头像
ctx.save();
ctx.beginPath()//开始创建一个路径
ctx.arc(36, 26, 16, 0, 2 * Math.PI, false)//画一个圆形裁剪区域
ctx.clip()//裁剪
ctx.closePath();
ctx.drawImage(mainImg, 20, 10, 32, 32);
ctx.draw(true);
ctx.restore()//恢复之前保存的绘图上下文
 
 
//再次用 clip() 裁切一个圆形头像
ctx.save();
ctx.beginPath()//开始创建一个路径
ctx.arc(136, 26, 50, 0, 2 * Math.PI, false)//画一个圆形裁剪区域
ctx.clip()//裁剪
ctx.closePath();
ctx.drawImage(mainImg, 120, 10, 32, 32);
ctx.draw(true);
ctx.restore()//恢复之前保存的绘图上下文

可以看到第二次clip裁切圆形失败,成了原图正方形

最后一次编辑于  05-29  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 娇华
    娇华
    05-30

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    05-30
    赞同
    回复 1
  • 喵星有鱼🐟
    喵星有鱼🐟
    05-30

    相同问题,求解!!

    05-30
    赞同
    回复
  • 乔巴
    乔巴
    05-30

    同样遇到这个问题


    05-30
    赞同
    回复