Javascript 重叠剪辑问题

我遇到了一个问题，我抓取了一个用户

displayAvatar（）

，然后用一个弧形使图像变圆。这很好，但是，我需要在该图像的顶部放置一个圆，但由于前面的

clip（）

不带

clip（）

：

使用

clip（）

：

我知道在“With clip（）”图像中，弧形边框似乎显示在片段外部，但这是硬编码到图像中的，我将其作为图像编辑器的指南

我试着在代码周围移动，我删除了行

ctx.clip（）

，看到我的圆圈在图像顶部显示得很好

//环绕化身
ctx.beginPath（）；
ctx.arc（122.5141.8,81,0，Math.PI*2，真）；
ctx.closePath（）；
ctx.clip（）；
const avatar=wait Canvas.loadImage(
message.author.displayAvatarURL（{格式：'png'}）
);
ctx.strokeStyle='#ffffff'；
ctx.strokeRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（阿凡达，41.5,60.5,162,162）；
//在场圈
ctx.beginPath（）；
ctx.arc（184.5193.5,19,0，Math.PI*2，真）；
ctx.strokeStyle='#000000'；
ctx.lineWidth=8；
ctx.stroke（）；
ctx.fillStyle=userStatusColor；
ctx.fill（）；

看看画布剪辑（）的定义：

提示：剪裁区域后，所有未来的图形将仅限于剪裁区域（无法访问画布上的其他区域）。但是，您可以在使用clip（）方法之前使用save（）方法保存当前画布区域，并在将来的任何时候（使用restore（）方法）将其还原

下面是一个使用保存和恢复的示例

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（90,90,81,0，Math.PI*2，真）；
ctx.stroke（）；
ctx.save（）；
ctx.clip（）；
ctx.beginPath（）；
ctx.arc（150,50,19,0，Math.PI*2，真）；
ctx.fillStyle='#0000ff'；
ctx.lineWidth=8；
ctx.stroke（）；
ctx.fill（）；
ctx.restore（）；
ctx.beginPath（）；
ctx.arc（170,99,19,0，Math.PI*2，真）；
ctx.fillStyle='#ff0000'；
ctx.lineWidth=8；
ctx.stroke（）；
ctx.fill（）
谢谢！我确实试过
ctx.save（）但我没有完全理解它，也从来没有
ctx.restore（）