HTML5 Canvas: Linienbreite lässt sich nicht ändern
Frage von PC Control | 22.05.2014 um 22:53
Ich möchte eine Linie auf einem HTML 5 Canvas zeichnen und dabei die Breite der Linie variieren. Dazu habe ich folgenden Code entwickelt:
ctx.beginPath(); ctx.lineWidth = 1; ctx.moveTo(0, 0); ctx.lineTo(10, 10); ctx.lineWidth = 2; ctx.lineTo(20, 20); ctx.lineWidth = 3; ctx.lineTo(30, 30); ctx.lineWidth = 4; ctx.lineTo(40, 40); ... ctx.stroke();
Leider nimmt die Linie nicht die unterschiedlichen Breiten an. Stattdessen wird immer nur die letzte Breite der Linie übernommen und die komplette Linie in dieser Breite gezeichnet. Weiß jemand weiter?
Ähnliche Themen
HTML5 Canvas: Einsteiger Tutorial Teil 1 - Einführung
Tutorial | 0 Kommentare
HTML5 Canvas als Bild an Server senden und speichern
Tutorial | 0 Kommentare
jQuery: HTML5 Canvas mit Ajax an Server senden
Tutorial | 0 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 2 - Linien zeichnen
Tutorial | 0 Kommentare
Bild vor dem Upload im Browser verkleinern
Tutorial | 5 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 3 - Rechtecke und Kreise
Tutorial | 0 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 4 - Text auf Canvas schreiben
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Das Zeichnen der Linie geschieht erst bei dem Aufrufen von stroke() und zwar mit der Linienstärke, die zu diesem Moment eingestellt war. Dein erneutes Setzen der lineWidth hat dazu geführt, dass die Linienstärke immer wieder überschrieben wurde ohne zu zeichnen.
Du müsstest also ungefähr so vorgehen:
Allerdings würde sich hier eher eine Schleife anbieten, als alles von Hand zu schreiben.
22.05.2014 um 23:15