Warum kein clear canvas für redrawing notwendig

Jofre

Erfahrenes Mitglied
Bisher habe ich gedacht , dass, wenn ich Objekte auf der canvas bewege, dass dann ein permanentes clear canvas notwenig ist.

Jetzt habe ich ein Programm gesehen, da wird ein Objekt über den Bildschirm bewegt und es ist keine Hintergrund Korrektur notwendig.

Auszug aus dem Programm (learnWD/Youtube)


var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

var auge = new Image();
var bg = new Image();

auge.src = "auge.png";
bg.src = "Images/Hintergrund.png";

var gravity = 1;
var bX = 10;
var bY = 159;

function draw(){

ctx.drawImage(bg,0,0);

ctx.drawImage(auge,bX,bY);

bY += gravity;

requestAnimationFrame(draw);

}

draw();

Was ist hier der Trick?
 
Offensichtlich handelt es sich bei "bg" um ein Hintergrundbild, das das Canvas vollständig ausfüllt. Wenn man das als erstes zeichnet, entfällt die Notwendigkeit für das Löschen.
 
Bg ist das Hintergrundbild.

Es funktioniert aber nur wenn das Zeichnen des Hintergrunds und des beweglichlen Objekts in einer Funktion erfolgt.

SDo funktioniert es nicht:

function hinterGrund(){
ctx.drawImage(bg,0,0);
}
function draw(){

ctx.drawImage(auge,bX,bY);
bY += gravity;
requestAnimationFrame(draw);

}
hinterGrund();
draw();



Hast du eine Idee warum nicht?

GzG

Joachim
 
function hinterGrund(){
ctx.drawImage(bg,0,0);
}
function draw(){
hinterGrund();
ctx.drawImage(auge,bX,bY);
bY += gravity;
requestAnimationFrame(draw);
}
draw();

So funktioniert es auch
 
Das Zeichnen des Hintergrundbildes muss in jedem Frame erfolgen, weil sonst die früheren Bilder von "auge" nicht durch Überschreiben gelöscht werden. In deinem ersten Code geschieht das aber nur einmal beim Start des Skripts.
 
und zum Schluß

so auch:

function hinterGrund(){
ctx.drawImage(bg,0,0);
}
function draw(){
hinterGrund();
ctx.drawImage(auge,bX,bY);
bY += gravity;
requestAnimationFrame(draw);

}
function total(){
hinterGrund();
draw();
}

total();
 
Zurück