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 は使用時間内に渡されるため、常に「true」( ) になり、明示的なテスト ( vs )> 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 を移動する必要があります。

于 2013-10-08T21:38:20.120 に答える