Canvas: Bild verschieben

[String]

Hallo zusammen,

ich habe ein kleines Malprogramm mit Canvas und JavaScript erstellt.

Das Bild ist angelegt mit:

<canvas id="paint" width="500" height="500"></canvas>

Wenn ich jetzt z.B. ein Viereckt mit Canvas auf -20 / -20 zeichne, funktioniert das ja Problemlos.
Allerdings funktioniert es nicht, wenn ich das Bild verschieben will:

[script]canvas.translate(-20, -20)[/script]

Funktioniert das nicht, ohne das ich den gesamten Inhalt neu Zeichne..
Habe ich da irgendwie einen Denkfehler?

Muss ich das Bild immer komplett neu Zeichnen, wenn sich etwas bewegen soll?

[EDIT]:
Okay, ich habe da wohl etwas falsch verstanden.
Gibt es denn eine Möglichkeit den INHALT des Canvas zu verschieben, ohne das gezeichnet werden muss?


paD

 

[String]

Niemand ne Idee?

 

[ikosaeder]

Du musst zuerst den context abfragen:
var context = canvas.getContext('2d');
und dann context.translate
Bei mehreren Objekten wirst du aber nicht ohne neu zu zeichnen auskommen.
Schau dir mal dieses Tutorial an:
http://www.adityaravishankar.com/20...t-tutorial-breakout-i-introduction-to-canvas/

 

[String]

Es sind unter umständen ziemlich viele Objekte. Diese werden sich aber nicht verändern.
Deswegen bin ich so irritiert, dass ich die Objekte neu zeichnen muss.. irgendwie kann das nicht ganz sinngemäß sein.

Aber es wird wohl nichts anderes geben

paD

 

[ikosaeder]

Das funktioniert afaik überall so, egal ob das ein Zeichenprogramm ist oder ein Computerspiel.

 

[String]

Also, wenn ich bei meinem Canvas Bild auf einer Ebene 5000 Striche gemalt habe, muss ich die alle speichern (Array ect) um das Bild verschieben zu können.
Und bei jeder Verschiebung, müssen alle Striche neu gezeichnet werden..

Ob das nun alle Programme, oder Spiele so machen, sinnvoll ist das nicht und es ist auch EXTREM schwer vorstellbar, das z.b. Photoshop das so macht..

paD

 

[sheel]

Wenn man etwas in die Tiefe Richtung Grafikkarte&OS geht kommt der Sinn schon wieder.

Zu PS&Co: Es muss ja nicht zwangsläufig jede Zeichenoperation separat sein
(das Mindeste, was man da bekommt, ist Flackern, und Leistungseinbußen),
sondern man kann sich auch vom Prinzip das fertige Bild im Speicher halten
und zeichnen...usw.
das Thema füllt Bücher.


Javascript im Browser ist verglichen mit zB. C++ ja doch ziemlich eingeschränkt,
was die Möglichkeiten angeht.

 

[ikosaeder]

Hast du eine bessere Idee? Ich weiß es für Photoshop nicht, aber ich vermute, das es genau so läuft. Jede Linie wird als Pfad gespeichert. Da kommen für so ein Bild ein paar tausend Knoten zusammen, das ist aber kein Problem für die aktuellen Grafikkarten. Ein Spiel wie Doom3 hat in jedem Frame ein paar Millionen Polygone und die werden mit 50 Bilder pro Sekunde gezeichnet.

Einfaches Beispiel: Wenn du jetzt einen Kreis hast, und schiebst ein Rechteck darüber weg, dann musst du dir ja nicht nur den Kreis und das Rechteck merken, sondern auch ausrechnen, wieviel von dem Kreis das Rechteck verdeckt und wieviel sichtbar ist. Wenn du die Teile einzeln speicherst und übereinander zeichnest, dann bekommen die Pixel zuerst die Farbe des Kreises und dann werden die Pixel im Rechteck einfach darüber gezeichnet.