HTML5 Canvas: 1 px Line erzeugt 2 Pixel Linie mit falscher Farbe
Frage von PC Control | 20.05.2014 um 15:57
Die Möglichkeiten vom HTML 5 Canvas Element finde ich wirklich grandios! Allerdings bekomme ich es irgendwie nicht hin, eine Linie mit einer Dicke von einem Pixel zu zeichnen.
Ich nutze folgenden Code:
var canvas = document.getElementById('canv');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 10);
context.lineTo(100, 10);
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
Obwohl ich explizit angeben, dass die Breite der Linie genau ein Pixel betragen soll, wird stattdessen eine 2-Pixel-Linie gezeichnet. Auch die angegebene Farbe erscheint nur verblasst und nicht so wie angegeben.
Komischerweise funktioniert es, wenn man einen anderen Wert für lineWidth angibt. Eine 2px Line wird ohne weiteres gezeichnet. Was kann ich tun?
Ähnliche Themen
HTML5 Canvas: Einsteiger Tutorial Teil 2 - Linien zeichnen
Tutorial | 0 Kommentare
HTML5 Canvas als Bild an Server senden und speichern
Tutorial | 0 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 1 - Einführung
Tutorial | 0 Kommentare
jQuery: HTML5 Canvas mit Ajax an Server senden
Tutorial | 0 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 3 - Rechtecke und Kreise
Tutorial | 0 Kommentare
Bild vor dem Upload im Browser verkleinern
Tutorial | 5 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 Phänomen, dass du beschreibst, kommt daher, dass die Linie immer auf einen halben Pixel gesetzt wird. Wenn du deinen Code um diesen halben Pixel korrigierst, sollte die Linie normal gezeichnet werden:
Wenn man auf einer glatten Koordinate zeichnet, wird die Linie genau zwischen zwei Pixel gesetzt. Das führt dazu, dass sich die Linie mit verringerter Farbintensität auf die beiden nebeneinander liegenden Pixel erstreckt.
Das Problem tritt natürlich nur bei horizontalen und vertikalen Linien auf und daher habe ich auch nur die 10 aus deinem Beispiel auf 10.5 gesetzt (x-Achse) und nicht die 0 und die 100 auf der y-Achse geändert.
21.05.2014 um 16:28
Übrigens kann man auch die Funktion translate() benutzen, um das Verhalten zu ändern:
Durch translate() wird das Koordinatensystem vom Canvas um die angegebenen Werte verschoben. Das heißt, mit translate(0.5, 0.5) wäre der Punkt 0/0 auf 0.5/0.5 gesetzt.
Oder mit anderen Worten: Wenn man nach dem translate seine Linie bei 1/1 anfangen ließe, würde automatisch stattdessen bei 1.5/1.5 gezeichnet - die Werte 0.5/0.5 würden zu jeder Koordinate hinzugerechnet und damit die Linie immer auf eine gerade Koordinate gesetzt.
Wichtig: Das translate() wird zum Beispiel bei einer Änderung der Größe des Canvases zurückgesetzt.
22.05.2014 um 09:38