Javascript 如何在clip（）之后在画布中执行clearRect（）？

在画布中执行clip（）之后，我需要执行clearRect（）。不幸的是，它对我不起作用

如果我排除clip（）意味着clearRect（）对我来说很好

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.clip();  //after removing clip() clearRect() working
ctx.clearRect(20, 20, 100, 50);
</script>

如果我在调用canvasClip（）之后调用了clearRect（），它对我不起作用

提前感谢,， Kesavan

clip（）

的工作方式是，它接受当前的子路径声明，不应该在其填充区域中的所有内容都将从绘图区域中丢弃。也就是说，如果在该区域之外再次绘制某个对象，则该对象不会显示在上下文中

我想你的困惑来自于。此方法有点特殊，因为它创建了一个仅用于此方法的临时矩形子路径（

strokeRect

）

这是一个直观的例子，说明了这意味着什么：

const ctx=canvas.getContext（'2d'）；
//声明一个子路径
ctx.beginPath（）；
ctx.弧（50,50,30,0，数学PI*2）；//圆圈
//这将抛弃我们的圈子
ctx.fillStyle='红色'；
ctx.fillRect（120,50,30,30）；
//请稍等，以表明它已被丢弃
设置超时（（）=>{
ctx.fillStyle='蓝色'；
ctx.fill（）；//这只绘制圆，
//fillRect（）中的内部rect（）已消失，
//否则它现在会是蓝色的
}, 1000);
canvas{border:1px solid}
谢谢您的回答。但是我已经在我的代码中尝试过了。这对我不起作用。请在问题中找到下面的代码片段。请找到这个，并给我一些建议。你能举个实例吗？例如，在。您的实现中一定有问题。@KesavanusBramaniam首先，您在执行
rect（）
后从未填充（），然后
restore（）
仅当您要放弃以前设置的
剪裁
区域，然后再次检查您收到的
选项。请查找。我画了两个矩形A和B。我将clip（）应用于B。若我对A的尺寸执行clearRect（）。只有B被清除。但我需要清除整个A。所以只有我在clearRect（）之前应用了restore（）。好的，还有什么不起作用？你能给我举个简单的例子吗？