0

我正在尝试使用 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;
}
4

2 回答 2

1

问题是您正在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 移出条件检查块。

于 2013-10-08T21:38:20.120 回答
0

看起来您的“演示”变量未定义，您想改用“画布”变量。试试这个（在第二个代码片段中将“演示”更改为“画布”，第 3 行和第 4 行）：

var canvas = document.getElementById('demo');
var ctx = canvas.getContext('2d');
于 2013-10-08T21:18:54.330 回答