Punkt im Canvas von A nach B bewegen
Verfasst: So Nov 20, 2022 2:39 pm
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.
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.