Javascript 迭代时clearRect不工作？

为什么clearRect在本例中不起作用？我只希望最后一个红色矩形出现。取而代之的是，所有的十个都被画上了

var$c=document.getElementById（“c”）；
var ctx=$c.getContext（'2d'）；
var w=400；
var h=400；
$c.style.width=w+‘px’；
$c.style.height=h+‘px’；
$c.宽度=w；
$c.高度=h；
对于（变量i=0；i<10；++i）{
ctx.clearRect（0,040400）；
ctx.fillStyle=“红色”；
ctx.rect（i*10，i*10，10，10）；
ctx.fill（）；
}

---

您需要分离绘制矩形的路径，以便可以单独清除它们。您可以使用

ctx.beginPath

和

ctx.closePath

执行此操作

var$c=document.getElementById（“c”）；
var ctx=$c.getContext（'2d'）；
var w=400；
var h=400；
$c.style.width=w+‘px’；
$c.style.height=h+‘px’；
$c.宽度=w；
$c.高度=h；
ctx.fillStyle=“红色”；
（函数drawRect（i）{
ctx.clearRect（0,040400）；
ctx.beginPath（）；
ctx.rect（i*10，i*10，10，10）；
ctx.closePath（）；
ctx.fill（）；
如果（i<10）
setTimeout（函数（）{drawRect（i+1）；}，50）；
})(0);
它将不同的图形堆叠起来，一次完成所有图形的绘制，丢弃clearRect。您必须在每次迭代中启动一个新路径->您还可以通过重置画布来强制重画->