Punkt im Canvas von A nach B bewegen

[Orioner]

Hallo, ich bin es wieder ...
Mit einem neuen Problem/einer neuen Herausforderung ...

Die Situation:
Ich möchte mit JavaScript einen Punkt (von Punkt A zu Punkt B) über die Zeichenfläche (Canvas) bewegen. Die Bewegung soll für den Betrachter sichtbar sein.
Deshalb dachte ich mir, ich nehme eine Schleife, zerlege die Bewegung in kleine Abschnitte und ändere die Koordinaten des Punkt in der Zeichenfläche mit jedem Schleifendurchlauf um diesen Betrag/Abschnitt. Ich lösche somit mit jedem Schleifendurchlauf den Punkt der vorher gezeichnet wurde und zeichne ihn mit beginPath(), arc() und fill() neu an der neuen/geänderten Position (wohlgemerkt, innerhalb der Schleife).

Das Problem:
Leider durchläuft der Browser die schleife bis zum Schluss und zeichnet dann lediglich den Punkt "am Ende seiner Reise". Die Zwischenschritte werden nicht angezeigt.

Spekulation:
Kann sein, dass die Bewegung einfach viel zu schnell abläuft, sodass der Betrachter die "Zwischenschritte" einfach nicht sieht. Aber ich vermute, der Browser arbeitet irgendwie optimiert und spart sich das Neuzeichnen bis zum Schluss der Schleifendurchläufe auf.

Hilfe benötigt:
Hat jemand eine Idee, warum das so ist und wie ich das umgehen kann, sprich, wie ich die Bewegung sichtbar machen kann. Vielleicht gibt es ja eine komplett andere Herangehensweise.

Ich wäre für Hilfe/ein paar Ideen dankbar.

[Xin]

Spekulation:
Kann sein, dass die Bewegung einfach viel zu schnell abläuft, sodass der Betrachter die "Zwischenschritte" einfach nicht sieht. Aber ich vermute, der Browser arbeitet irgendwie optimiert und spart sich das Neuzeichnen bis zum Schluss der Schleifendurchläufe auf.

Das klingt so.
Schnelle Computer haben die Eigenschaft einfache Aufgaben sehr schnell zu lösen und Monitore zeigen im Regelfall 60 Bilder pro Sekunde an. Wenn also alle Bilder gezeichnet werden bevor das erste Update kommt, siehst du von dem ganzen Spektakel nichts.

Du musst also eine Zeitsteuerung einbauen.
Da Du nicht weißt, wie schnell Dein Computer ist, musst Du vor dem Zeichnen fragen, wie spät es ist. Die Position Deines Punktes muss also so gezeichnet werden, dass der Punkt da gezeichnet wird, wo er zum entsprechenden Zeitpunkt zu sein hat. Auf einem schnellen Rechner werden also viel mehr Bilder gezeichnet, aber der Punkt wandert zeitabhängig und nicht bildabhängig.

Wenn jetzt ein Spiel 300fps erreicht, ist das super - wenn der Monitor aber nur 60 davon anzeigt, ist das Blödsinn. Entspechend kannst Du dann - zeitabhängig - warten, bis Du das nächste Bild zeichnest. Das ist dann die Kür.

Hilfe benötigt:
Hat jemand eine Idee, warum das so ist und wie ich das umgehen kann, sprich, wie ich die Bewegung sichtbar machen kann. Vielleicht gibt es ja eine komplett andere Herangehensweise.

Ich verstehe nicht viel von Java Skript, aber ich würde mal stumpf versuchen alle 10 Millisekunden das Canvas neu zeichnen. Und den Punkt dann halt Zeitabhängig zu positionieren.

[Orioner]

Vielen Dank für deine schnelle Antwort!

Ich habe in der Zwischenzeit noch ein bisschen recherchiert und diese Lösung gefunden:

Code: Alles auswählen

step = 1000;
stepX = (endPosX - startPosX) / step;
stepY = (endPosY - startPosY) / step;
function move() {
	ctx.beginPath();
	ctx.arc(startPosX, startPosY, radius + 1, 0, 2 * Math.PI, false);
	ctx.fillStyle = "black";
	ctx.fill();
	startPosX += stepX;
	startPosY += stepY;
	ctx.beginPath();
	ctx.arc(startPosX, startPosY, radius, 0, 2 * Math.PI, false);
	ctx.fillStyle = "white";
	ctx.fill();
	step--;
	console.log(step + ": " + startPosX + ";" + startPosY);
	if (step > 0) setTimeout(function alois() {
		move();
	}, 10);
}
move();

Damit wird die Funktion 1000 Mal aufgerufen, mit jeweils 10 Millisekunden Verzögerung. Ich zeichne nur den Punkt neu, nicht das komplette Canvas. Wenn du zu der Lösung noch Anmerkungen hast, würde ich sie gerne lesen. Ansonsten Danke für deine Überlegungen!

[Xin]

Die wichtigste Anmerkung ist, dass hier die Zeit des Zeichnens nicht berücksichtigt wird. Man geht einfach davon aus, dass das schnell geht und das ganze etwa 10 Sekunden dauert. Wenn es aber 10ms dauert, das Canvas zu aktualisieren, dauert die Animation entsprechend 20 Sekunden. Die Laufgeschwindigkeit ist also abhängig von der Geschwindigkeit des Rechners. Diese Abhängigkeit wurde nicht entfernt.

Ansonsten... es geht nichts über globale Variablen. :->

[Orioner]

Ansonsten... es geht nichts über globale Variablen. :->

Rofl. Nun ja, es ist "quick and dirty", ja. Verfeinern kann man später (wenn alles funktioniert). G
Habe jetzt noch eine andere Methode gefunden "setInterval" statt "setTimeout" - da sollte die Abhängigkeit entfernt sein. Danke jedenfalls für deine Anmerkung. Freu' mich sehr.