- 需求的场景描述（希望解决的问题）
画布上绘制矩形后，在该矩形上绘制圆形图片失败，原因是矩形和绘制的圆形重叠导致


// 画入海报背景
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))
})

微信小程序开发问题解答