【BUG反馈】canvas中clip截取多张图片失效的问题
发布于 5 年前 作者 weixie 5042 次浏览 来自 问答
  • 当前 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 回复

相同问题，求解！！

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

同样遇到这个问题

回到顶部