- 需求的场景描述（希望解决的问题）
画布上绘制矩形后，在该矩形上绘制圆形图片失败，原因是矩形和绘制的圆形重叠导致
// 画入海报背景
ctx.drawImage(海报背景图, 0, 0, that.myCanvasWidth, that.myCanvasHeight);
ctx.draw()
// 白色矩形
ctx.rect(12, that.myCanvasHeight - 130, that.myCanvasWidth - 24, 80)
ctx.setFillStyle('white')
// 切割成圆角矩形
that.drawRoundedRect(ctx, 12, that.myCanvasHeight - 130, that.myCanvasWidth - 24, 80, 4)
ctx.clip()
ctx.draw(true)
// 圆形头像画入
ctx.save(); // 先保存状态 已便于画完圆再用
ctx.beginPath(); //开始绘制
//先画个圆
ctx.arc(45, that.myCanvasHeight - 90, 25, 0, Math.PI * 2)
ctx.clip()//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
ctx.drawImage(头像图片, 20, that.myCanvasHeight - 115, 50, 50) // 推进去图片
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
ctx.draw(true)
ctx.draw(true, setTimeout(function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
destWidth: 375 * 3,
destHeight: 550 * 3,
canvasId: 'canvas',
success: function(res) {
that.imageTempPath = res.tempFilePath; //这就是生成的文件临时路径
},
fail: function(res) {
console.log(res,'fail');
}
})
that.$apply()
}, 50))
})
等我回忆一下，当时遇到过这个问题...其实就是路径重合了，可以闭合路径或者在画布可视范围外面再画一个矩形就解决了
------------------------
找了一点以前画圆的代码（现在已经换成别的了），在这之前是画过矩形、图片之类的操作的，反正大概是和路径有关系，时间久远具体的忘了...
ctx.save();
ctx.beginPath();
// 结束之前的路径
ctx.setStrokeStyle('rgba(0,0,0,0)');
ctx.stroke();
// 画圆 裁剪
ctx.arc(imgW / 2 + imgX, imgH / 2 + imgY, imgW / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(res.tempFilePath, imgX, imgY, imgW, imgH);
ctx.restore();
目前发现的问题是 头像 基本上安卓可以画圆形图片，但是苹果不行![]()
提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
https://developers.weixin.qq.com/s/KaJuHBmK7X4c