Javascript HTML清晰动画

我试图使用if语句清除画布动画，但当我单击“清除”按钮时，什么也没有发生，没有任何建议。我还需要删除对象以节省内存，还是在清除画布后释放内存

    <canvas id="demo" width=720 height=550></canvas>
    <input type="button" id="clear" value="Clear">

var-doChange=true；
window.onload=function（）{
var demo=document.getElementById（'demo'）；
var ctx=demo.getContext（'2d'）；
document.getElementById（'clear'）.addEventListener（'click'，function（）{
doChange=假；
ctx.clearRect（0，0，demo.width，demo.height）；
控制台日志（“清除”）；
}，假）；
var animObjects=[]；
推送（新的动画矩形（ctx，0，90，80，80，'黄色'，3，3））；
环（多切）；
函数循环（doChange）{
如果（doChange==真）{
ctx.clearRect（0，0，demo.width，demo.height）；
for（var i=0，ao；ao=animObjects[i]；i++）{
ao.update（）；
}
请求动画帧（循环）；
}
}
函数animRectangle（ctx、x、y、XSize、YSize、color、dx、dy）{
var me=这个；
这个.x=x；
这个。y=y；
this.XSize=XSize；
this.XSize=XSize；
这个颜色=颜色；
this.dx=dx；
this.dy=dy；
var-bool=0；
this.update=函数（）{
if（me.x<0 | | me.x>ctx.canvas.width-80）{
me.dx=-me.dx；
}
如果（me.y<50 | me.y>200）{
me.dy=-me.dy；
}
me.x+=me.dx；
me.y+=me.dy；
render（）；
}
函数render（）{
ctx.beginPath（）；
ctx.rect（me.x，me.y，me.XSize，me.XSize）；
ctx.closePath（）；
ctx.fillStyle=me.color；
ctx.fill（）；
}
归还这个；
}

您的“demo”变量似乎未定义，您想改用“canvas”变量。请尝试此操作（将“demo”更改为“canvas”，第二个代码段的第3行和第4行）：

---

问题是，您正在使用函数中的局部变量覆盖全局

doChange

。当rAF传入它使用的时间时，它将始终为“真”（

>0

），并且由于您没有进行显式测试（

=

与

=

），非零值将始终为“真”

我还建议您在条件检查中执行所有操作（在本例中），而不要对它们进行分段，因为您的代码是异步的

例如，修改此代码段以仅设置标志：

document.getElementById('clear').addEventListener('click', function() {
    doChange = false; /// set global flag to false
}, false);

然后在循环中执行条件检查并将操作移到内部：

function loop() { // can't pass arguments in here as rAF will pass in used time
                  // and it will override the global doChange

    if (doChange === true) { /// explicitly check for boolean using ===

        ctx.clearRect(0, 0, demo.width, demo.height);

        for(var i = 0, ao; ao = animObjects[i]; i++) {
            ao.update();
        }

        requestAnimationFrame(loop);

    } else {
        ctx.clearRect(0, 0, demo.width, demo.height);

    }
}

---

请注意，根据您的条件在此处的工作方式，单击“检查”时，循环将结束。如果您希望循环继续运行，则必须将rAF移出“条件检查”块。

谢谢，我已对代码进行了一些更改，但它仍然不起作用，现在它只清除对象，但没有动画。我认为该循环有问题e如果声明不客气。我看不出你实际上在哪里循环你的动画，也许这是一个内置函数，我只是没有注意到，我不确定。不过，这里有一个关于画布动画的好例子，请看：这没关系。所有带id的元素都可以直接引用。当然，可以讨论最佳实践，但是这段代码的唯一结果是OP使用了对同一元素的两个引用-这两个引用都可以工作，但不是最佳的。我对代码做了一些更改，但仍然不起作用，现在它只是清除了对象，但没有动画。我想if语句有问题谢谢你的清晰解释，我正在尝试ng要执行此操作一段时间，还需要删除对象（animObjects）以释放空间吗memory@KarishKarish没问题。作为程序员，我们无法控制JavaScript中的内存GC。您可以尝试取消引用所有实例，但清除（或不清除）未使用的对象将取决于浏览器。

document.getElementById('clear').addEventListener('click', function() {
    doChange = false; /// set global flag to false
}, false);

function loop() { // can't pass arguments in here as rAF will pass in used time
                  // and it will override the global doChange

    if (doChange === true) { /// explicitly check for boolean using ===

        ctx.clearRect(0, 0, demo.width, demo.height);

        for(var i = 0, ao; ao = animObjects[i]; i++) {
            ao.update();
        }

        requestAnimationFrame(loop);

    } else {
        ctx.clearRect(0, 0, demo.width, demo.height);

    }
}