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

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

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

再次使用clip

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__裁切圆形失败__，成了原图__正方形__