javascript - 使用clearRect时无法在 Canvas 上绘制多个形状

Question

当我在绘制所有对象之前使用 ctx.clearRect 时，仅绘制最后一个对象(使用更新的 chrome 和 firefox)。一切都是在没有clearRect的情况下绘制的。

//in interval    
for(var i = 0;i<objects.length;i++){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    objects[i].draw();
}

function drawRect(x,y,w,h,fill){
    if(fill)
        ctx.fillRect(x-camera.x,y-camera.y,w,h);
    else
        ctx.strokeRect(x-camera.x,y-camera.y,w,h);
}

function square(pos,size){
    object.call(this);
    this.pos = pos;
    this.size = size;
    this.draw = function(){
        drawRect(this.pos.x,this.pos.y,this.size.x,this.size.y);
    }
}

Answer 1

您需要将 clearRect 方法调用移出循环体:

ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < objects.length; i++) {
    objects[i].draw();
}

否则，您将在每次循环迭代开始时清除 Canvas - 这会导致除最后一个对象之外的所有对象都被清除。