Question

所以，我画了我的圈子：

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();

我们得到了这个：https://i.imgur.com/qhrDSyr.png

涂料。现在我要清除画布 - 将其彻底擦干净。

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

这会从左上角开出一个圆形块：https://i.imgur.com/uqJ4rA9.png

好的，没什么大不了的。 homec的宽度和高度都是180px（并且从未改变过），所以如果我们从0,0开始以圆圈形状清理它，我就会碰它 - 这应该可以工作。

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

相同大小的大块消失。

我在这里做错了什么？我该如何清除它？

Answer 1

@apemom，您的代码homectx.clip()是罪魁祸首。为了更好地理解我所指的内容，请阅读本文档，了解canvas.clip（）的工作原理。

http://www.w3schools.com/tags/canvas_clip.asp

引用： clip（）方法从原始画布剪切任何形状和大小的区域。

提示：剪切区域后，将来所有绘图都将限制为剪切区域（无法访问画布上的其他区域）。但是，在使用clip（）方法之前，可以使用save（）方法保存当前画布区域，并在将来的任何时候将其恢复（使用restore（）方法。

祝你好运！

HTML Canvas以循环方式清除，并且不会完全清除？

1 个答案: