HTML5 Canvas: Bestimmte Objekte im Hintergrund/Vordergrund

julahanses

Grünschnabel
Hallo.

Ich habe eine Frage zum "neuen" HTML5 Canvas-Tag.
Ich möchte das bestimmte Objekte im Hintergrund und andere im Vordergrund gezeichnet werden.
Also so etwas wie ein z-index, denn man schon von Div's kennt. Ich möchte jedem Objekt eine Variable z.B. "position" , und dieser Variable einen wert geben, z.B. 3

Das heißt dann ein Objekt, wo die Variable "position" den Wert 3 hat, wird vor dem Objekt mit dem Wert 2 gezeichnet, aber hinter einem Objekt mit dem Wert 4.

Habt ihr eine Ahnung wie das möglich sein wird?
Mit dem "globalCompositeOperation" (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html) konnte ich bereits etwas in diese Richtung erzielen. Nämlich das ab jetzt alles neue in den Vordergrund oder alles neue in den Hintergrund gezeichnet wird.

Danke im voraus :)
 
Du musst deine Zeichenreihenfolge ändern und deine Liste von Objekten nach dem Index sortieren.
Oder wenn du eine fixe Anzahl hast (z.B. genau drei Ebenen) dann halte dir drei canvas Objekte im Speicher und zeichne die einzelnen Objekte auf die entsprechenden Ebene und anschließend die drei Canvas Objekte auf die Hauptcanvas.
 
Zurück