HTML画布以循环方式清除，不会完全清除吗？
HTML画布以循环方式清除，不会完全清除吗？
提问于 2017-01-16 23:12:15
所以，我画了一个圆圈：
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);同样大小的块就消失了。
我在这里做错了什么？我如何清除它？
回答 1
Stack Overflow用户
发布于 2017-01-16 23:43:11
@apemom，您编写的homectx.clip()是这里的罪魁祸首。为了更好地理解我所指的内容，请阅读有关canvas.clip()如何工作的文档。
http://www.w3schools.com/tags/canvas_clip.asp
引用: clip()方法从原始画布中裁剪出任意形状和大小的区域。
提示:一旦一个区域被裁剪，所有未来的绘图都将被限制在被裁剪的区域(不能访问画布上的其他区域)。但是，您可以在使用clip()方法之前使用save()方法保存当前的画布区域，并在将来的任何时候恢复它(使用restore()方法)。
祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41686535
复制相关文章
相似问题
安装Symfony，作曲家
InvalidArgumentException作曲家安装symfony
symfony flex作曲家InvalidArgumentException
Symfony 2 ->作曲家和CloudControl
作曲家没有要求symfony/symfony在symfony 4上
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
