Warum kein clear canvas für redrawing notwendig


Jofre

Erfahrenes Mitglied
#1
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?
 

Sempervivum

Erfahrenes Mitglied
#2
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.
 

Jofre

Erfahrenes Mitglied
#3
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
 

Jofre

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

So funktioniert es auch
 

Sempervivum

Erfahrenes Mitglied
#5
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.
 

Jofre

Erfahrenes Mitglied
#6
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();
 

Neue Beiträge