相同问题,求解!!
【BUG反馈】canvas中clip截取多张图片失效的问题- 当前 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裁切圆形失败,成了原图正方形
2019-05-30