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();
}

否则，您将使用每个循环迭代的开始清除画布 - 这将导致除最后一个对象之外的所有对象都被清除。

使用clearRect时，无法在画布上绘制多个形状

1 个答案: