Javascript globalCompositeOperation和setTimeout出现问题

我正在尝试创建一个动画，它可以像橡皮擦一样清除图像顶部的矩形填充。当圆设置动画时，它会清除它所覆盖的所有区域

我可以使用GlobalComposite操作来执行此操作，但是当我尝试减慢动画时，它不起作用。我正在尝试设置超时功能。你知道为什么动画没有变慢吗？我已经尝试了我所知道的一切，任何帮助或选择都将不胜感激

另外，当我尝试使用setTimeOutpunc时，time in ms函数也会删除图像

function compose()
//adds the purple fill rectangle, adds the image and then animates the circle
{
context.globalCompositeOperation = 'destination-atop';
fillRectangle(100, 100, 900, 500);
context.globalCompositeOperation = 'destination-atop';
context.drawImage(img, destX, destY);
for (var a = 0; a < 1000; a++) {

    if (x + dx + radius > width || x + dx < radius) {
        dx = -dx;
    }
    if (y + dy + radius > height || y + dy < radius) {
        dy = -dy;
    }
    x = x + dx;
    y = y + dy;
    //setTimeout("circle(x,y)", 1);
    circle(x, y);
    }
context.globalCompositeOperation = 'destination-atop';
context.drawImage(img, destX, destY
}
function circle(x, y)
{// this simply animates the circle over the purple fill
context.globalCompositeOperation = 'destination-out';
context.fillStyle = "#444444";
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, true);
context.closePath();
context.fill(); //setTimeout("context.fill();",3);
context.globalCompositeOperation = 'destination-atop';
}

完整代码： 帆布试验

使用setTimeout不是正确的方法。setTimeout是一个非同步函数。它会立即返回，并为以后安排工作

在编写代码时，整个for循环将立即运行，设置1000个setTimeout计时器。这不会减慢动画的速度，只会稍微延迟动画的开始

要减慢动画的速度，您必须重新构造代码，以便在setTimeout中执行for循环的每个迭代，当该超时完成并执行时，您可以使用循环的下一个迭代来安排下一个setTimeout。事情会是这样的：

function compose()
//adds the purple fill rectangle, adds the image and then animates the circle
{
    context.globalCompositeOperation = 'destination-atop';
    fillRectangle(100, 100, 900, 500);
    context.globalCompositeOperation = 'destination-atop';
    context.drawImage(img, destX, destY);
    var cnt = 0;

    function runIteration() {
        if (x + dx + radius > width || x + dx < radius) {
            dx = -dx;
        }
        if (y + dy + radius > height || y + dy < radius) {
            dy = -dy;
        }
        x = x + dx;
        y = y + dy;
        circle(x, y);
        cnt++;
        if (cnt < 1000) {
            setTimeout(runIteration, 10);
        }
    }
    runIteration();
}

---

谢谢你的快速回复，我以前也尝试过类似的东西，我的动画也能正常工作。然而，这种方式会导致一个问题。这会完全擦除画布上的所有内容，当我希望图像保留但矩形被擦除时。我尝试在runIteration之后移动drawImage，它绘制的第一个圆会移除矩形填充，而不是图像。但是，之后的任何圆圈都会删除显示空画布的图像和矩形填充。实际上，我刚刚尝试了一些东西，它正在工作，我在您提供的代码中，将绘图图像放在setTimeout函数之前，它工作了。如果您能帮助我解释为什么在这种情况下这样做，我将不胜感激。我必须查看您正在使用的全部代码，您可以在问题的末尾添加它作为新的修订版，以评论您所拥有的内容。重要的问题是，在最后一次setTimeout运行之前，您不能在动画之后运行任何东西。我不知道该怎么写新代码。我不知道你为什么要开始一个新问题。我认为使用原始问题下方的编辑链接，并将这个新版本添加到帖子末尾会更合适。

function compose()
//adds the purple fill rectangle, adds the image and then animates the circle
{
    context.globalCompositeOperation = 'destination-atop';
    fillRectangle(100, 100, 900, 500);
    context.globalCompositeOperation = 'destination-atop';
    context.drawImage(img, destX, destY);
    var cnt = 0;

    function runIteration() {
        if (x + dx + radius > width || x + dx < radius) {
            dx = -dx;
        }
        if (y + dy + radius > height || y + dy < radius) {
            dy = -dy;
        }
        x = x + dx;
        y = y + dy;
        circle(x, y);
        cnt++;
        if (cnt < 1000) {
            setTimeout(runIteration, 10);
        }
    }
    runIteration();
}