Javascript HTML画布以循环方式清除，并赢得'；不完全清楚吗？

所以，我画了一个圆圈：

var homeimg = document.createElement("img");
homeimg.src = "img/nav/home-inactive.png";
var homec = document.getElementById("home-canvas");
var homectx = homec.getContext("2d");
homectx.beginPath();
homectx.arc(85, 85, 85, 0, 2 * Math.PI);
homectx.closePath();
homectx.shadowColor = "rgba(0, 0, 0, 0.3)";
homectx.shadowOffsetX = 2;
homectx.shadowOffsetY = 2;
homectx.shadowBlur = 3;
homectx.drawImage(homeimg, 0, 0, 170, 170);
homectx.beginPath();
homectx.arc(0, 0, 85, 0, 2 * Math.PI, true);
homectx.clip();
homectx.closePath();
homectx.restore();

我们得到这个：

毒品。现在我想清理画布，把它擦干净

homectx.clearRect(0, 0, homec.width, homec.height);

这将从左上角取出一个圆形块：

好吧，没什么大不了的。homec的宽度和高度都是180px（并且从来没有改变），所以如果我们从0，0开始清除一个圆形，我就把它放大——这应该行得通

homectx.clearRect(0, 0, 600, 600);

同样大小的块消失了

我做错了什么？我该如何清除这个？

@apemom， 你编写的代码

homectx.clip（）

就是罪魁祸首。为了更好地理解我所指的内容，请阅读有关canvas.clip（）工作原理的文档

引述： clip（）方法从原始画布剪裁任意形状和大小的区域

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

---

祝你好运

这里的目标是什么？没有使用第一个路径声明，您正在恢复一个未保存的状态，在第二个圆弧上进行剪裁（该圆弧的中心位于0,0），我不会谈论误用的closePath，每个人都这样做。。。