00 Stimmen

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?

AntwortenPositivNegativ
0Beste Antwort0 Stimmen

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:

ctx.beginPath();
ctx.moveTo(0, 0);        
ctx.lineTo(10, 10);
ctx.lineWidth = 1;
ctx.stroke();  

ctx.beginPath();
ctx.moveTo(10, 10);        
ctx.lineTo(20, 20);
ctx.lineWidth = 2;
ctx.stroke();  


ctx.beginPath();
ctx.moveTo(20, 20);        
ctx.lineTo(30, 30);
ctx.lineWidth = 3;
ctx.stroke(); 

Allerdings würde sich hier eher eine Schleife anbieten, als alles von Hand zu schreiben.
22.05.2014 um 23:15

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

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.