nicht angemeldet
Ring auf <canvas> zeichnen
MudGuardHallo,
ich möchte ein hohles Objekt auf den Canvas zeichnen (zum Beispiel einen Ring), sodass der bestehende Hintergrund innen erhalten bleibt.
ctx.fillRect( 0, 30, 60, 60); // Hintergrund (Beispiel)
ctx.fillRect( 10, 10, 50, 50); // äußeres Rechteck
ctx.clearRect(20, 20, 40, 40); // inneres Rechteck
Auf diese Weise wird der (eckige) Ring zwar sichtbar, aber innen ist der Hintergrund gelöscht, der soll aber sichtbar bleiben.
Zur Zeit sehe ich keine Möglichkeit. Habe es auch mit verschiedenen CompositeOperations und ctx.clip() erfolglos versucht. Hat jemand vielleicht jemand eine Idee?
Es soll auch im IE (über ExplorerCanvas) funktionieren.
-
Hi,
ctx.fillRect( 0, 30, 60, 60); // Hintergrund (Beispiel)
ctx.fillRect( 10, 10, 50, 50); // äußeres Rechteck
ctx.clearRect(20, 20, 40, 40); // inneres Rechteck> > Auf diese Weise wird der (eckige) Ring zwar sichtbar, aber innen ist der Hintergrund gelöscht, der soll aber sichtbar bleiben. Dann zeichne halt den Rahmen aus 4 Rechtecken (oben, unten, links, rechts) cu, Andreas -- [Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/) [O o ostern ...](http://ostereier.andreas-waechter.de/) Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.-
Dann zeichne halt den Rahmen aus 4 Rechtecken (oben, unten, links, rechts)
Der Rahmen war nur ein Beispiel. Ich suche eine allgemeine Lösung.
Dafür bräuchte man einen Algorithmus, der die Form in Stücke teilt und diese dann einzeln zeichnet.
evtl. möglich, aber sehr aufwändig.
Es ist doch nur eine Form mit Innenseite. In SVG gibt es dafür Sub-Pfade.. aber hier?
-
Hi,
Es ist doch nur eine Form mit Innenseite.
In der Theorie möglicherweise - aber in der Praxis hast du etwas ganz anderes draus gemacht.
Du hast erst ein mit Farbe gefülltes Rechteck auf den Hintergrund gelegt - jetzt kannst du nicht erwarten, dass dieses "Löcher" bekommt, durch die man durchschauen kann, wenn du noch etwas anderes auf das Rechteck drauflegst.
Strassengullis werden auch nicht "gemacht", in dem man erst einen äusseren und dann noch einen inneren Ring auf den Asphalt malt ...
In SVG gibt es dafür Sub-Pfade.. aber hier?
Mozilla Developer Center: Canvas -> Drawing paths
Vielleicht bekommst du es damit hin - wenn du alle Linien des Objektes "an einem Stück" zeichnest. Malen nach Zahlen also quasi.MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Es ist doch nur eine Form mit Innenseite.
In der Theorie möglicherweise - aber in der Praxis hast du etwas ganz anderes draus gemacht.
Wenn es einen direkten Weg gäbe, ohne "etwas anderes daraus zu machen", wäre das natürlich am besten.
In SVG gibt es dafür Sub-Pfade.. aber hier?
Mozilla Developer Center: Canvas -> Drawing paths
Vielleicht bekommst du es damit hin - wenn du alle Linien des Objektes "an einem Stück" zeichnest. Malen nach Zahlen also quasi.Leider nein, sobald die äußeren Linien gezeichnet sind, wird das gesamte Objekt gefüllt.
-
Hallo elaine
Mozilla Developer Center: Canvas -> Drawing paths
Vielleicht bekommst du es damit hin - wenn du alle Linien des Objektes "an einem Stück" zeichnest. Malen nach Zahlen also quasi.Leider nein, …
Wirklich nicht?
ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI,false); ctx.arc(75,75,35,Math.PI, 0,true); ctx.arc(75,75,50,0,Math.PI,true); ctx.arc(75,75,35,Math.PI, 0,false); ctx.fill();Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI,false);
ctx.arc(75,75,35,Math.PI, 0,true);
ctx.arc(75,75,50,0,Math.PI,true);
ctx.arc(75,75,35,Math.PI, 0,false);
ctx.fill();Das ist ja super!! Danke schön :)
Es funktioniert auch für allgemeine Formen, man braucht nur die äußere und die innere Kontur zu verbinden, sodass die gesamte Form am Stück gezeichnet wird. Die Konturlinie darf sich dabei nicht überschneiden, also muss der innere Pfad in entgegengesetzter Richtung gezogen werden.
Viele Grüße
-
-
-
-
-