收藏
回答

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

审核类型 框架类型 问题类型 提审时间 AppID
代码审核 小程序 Bug 2019-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裁切圆形失败,成了原图正方形

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

3 个回答

登录 后发表内容