HTML 清除动画

Question

我正在尝试使用 if 语句清除画布动画，但是当我单击清除按钮时没有任何反应，任何建议。 我还需要 ho 删除对象以节省内存，或者一旦我清除画布，它就会释放内存

    <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=false;
ctx.clearRect(0, 0, demo.width, demo.height);
console.log("clear");
}, false);
var animObjects = [];
animObjects.push(new animRectangle(ctx, 0, 90, 80,80, 'yellow', 3, 3));

 loop(doChange);

function loop(doChange) {
if(doChange==true){
    ctx.clearRect(0, 0, demo.width, demo.height);
    for(var i = 0, ao; ao = animObjects[i]; i++) {
        ao.update();
    }
    requestAnimationFrame(loop);
}
}
function animRectangle(ctx, x, y, XSize,YSize, color, dx, dy) {
var me = this;
this.x = x;
this.y = y;
this.XSize = XSize;
this.XSize = XSize;
this.color = color;
this.dx = dx;
this.dy = dy;
var bool = 0;
this.update = function() {
    if (me.x < 0 || me.x > ctx.canvas.width-80){
        me.dx = -me.dx;
    }
    if (me.y < 50 || me.y > 200){
        me.dy = -me.dy;
    }
    me.x += me.dx;
    me.y += me.dy;
    render();
}
function render() {
    ctx.beginPath();
    ctx.rect(me.x, me.y, me.XSize, me.XSize);
    ctx.closePath();
    ctx.fillStyle = me.color;
    ctx.fill();
}
return this;
}

Answer 1

问题是你在函数中使用局部变体覆盖全局doChange。当rAF通过它的时间使用时，它将始终是"true"（> 0），并且由于您不进行显式测试（==与===），非零值将始终为"true"。

我还建议您在条件检查中执行所有操作（在这种情况下），而不是将它们分段，因为您的代码是异步的。

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

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 移出条件检查块。

Answer 2

看起来您的"demo"变量未定义，您想改用"canvas"变量。试试这个（将"demo"更改为"canvas"，第二个代码片段中的第 3 行和第 4 行）：

var canvas = document.getElementById('demo');
var ctx = canvas.getContext('2d');