HTML清晰动画

Question

我正在尝试使用 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=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 传入它的使用时间时，它将始终为“真”（> 0）并且由于您不进行显式测试（== 与 ===），非零值将始终为“真” ”。

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

例如，修改这个 sn -p 只设置标志：

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

您的“演示”变量似乎没有定义，您想使用“画布”变量。试试这个（在你的第二个代码 sn-p 中将 'demo' 更改为 'canvas'，第 3 行和第 4 行）：

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