html5 Canvas-Zeichen-Tutorial (3) – Der Grund, warum 1-Pixel-Linien in den Canvas_html5-Tutorial-Fähigkeiten unscharf sind

Fortsetzung des vorherigen Artikels Tutorial zum Zeichnen von Linien auf Leinwand
Wie wir letztes Mal erwähnt haben, weist die Leinwand manchmal 1-Pixel-Linien auf, die unscharf sind und breiter erscheinen, wie unten gezeigt:

Eine solche Linie ist offensichtlich nicht das, was wir wollen.
Der Zweck dieses Artikels besteht darin, das Prinzip zu klären und zu lösen.
Jeder weiß, dass die kleinste Anzeigegröße auf dem Bildschirm 1 Pixel beträgt. Obwohl Dinge, die kleiner als 1 Pixel sind, möglicherweise nicht angezeigt werden, ist es dem Computer egal, er wird versuchen, sie zu zeichnen.
Tatsächlich sind Pixel schließlich auch eine Einheit. Was würde passieren, wenn wir die Leinwand auf eine Größe vergrößern würden, die groß genug ist, um jedes Pixel deutlich zu sehen? Es sieht wahrscheinlich so aus:

Jedes Pixel hat einen Start- und einen Endbereich, wie in der Abbildung gezeigt. Ihr Bereich beginnt links, erstreckt sich über 1 Pixel und endet rechts.
Wenn wir beim Zeichnen einer 1-Pixel-Linie den Anfangs- und Endbereich der Pixel beachten, erhalten wir auf jeden Fall eine ganz normale dünne Linie. Wie folgt:

Aber leider ist die Strichzeichnungsmethode der Leinwand anders. Wie wir im vorherigen Artikel gesagt haben, hat jede Leinwandlinie eine unendlich dünne „Mittellinie“, und die Breite der Linie erstreckt sich von der Mittellinie zu beiden Seiten. Wenn wir immer noch eine Linie vom zweiten Pixel zeichnen, wird die Mittellinie der Linie am Startpunkt des zweiten Pixels ausgerichtet, und dann beginnen wir mit dem Zeichnen und es entsteht das Problem: Die Linie der Leinwand erstreckt sich auf beide Seiten Anstatt sich von der Mittellinie aus zu einer bestimmten Seite zu erstrecken (wenn sie sich hier beispielsweise nur nach rechts erstreckt, ist unser Problem kein Problem mehr), sieht unsere Linie nach der Verlängerung tatsächlich so aus:

Zu diesem Zeitpunkt gab es ein weiteres Problem: Der Computer erlaubt keine Grafiken, die kleiner als 1 Pixel sind, also ging er einen Kompromiss ein: Zeichnen Sie beide Pixel.
Auf diese Weise wird die ursprüngliche 1-Pixel-Linie zu einer Linie, die 2 Pixel breit aussieht.
Der Grund für den Fehler wurde gefunden: Die Linie im Canvas richtete die Mittellinie am Startpunkt des Pixels aus, nicht am Mittelpunkt des Pixels.
Wie lösen wir also dieses schmerzhafte Problem? Vielleicht hat sich schon jemand gedacht: Da die Ausgangspunkte der beiden unterschiedlich sind, machen wir ihre Ausgangspunkte gleich!
Wir müssen nur die Mittellinie der Linie am Mittelpunkt des Pixels ausrichten!
Der Mittelpunkt des Pixels ist leicht zu finden. Beispielsweise liegt der Mittelpunkt des zweiten Pixels gemäß der Erklärung auf dem Bild bei (x-0,5). )px.


Natürlich können Sie in weniger strengen Situationen auch x 0,5 verwenden.
Jetzt probieren wir unsere Forschungsergebnisse auf Leinwand aus.

Code kopieren

Der Code lautet wie folgt:

ctx.moveTo(100.5, 100,5);
ctx.lineTo(200,5,100,5);
ctx.lineTo(100,5,200,5); ;
ctx.closePath();
ctx.lineWidth = 1;
ctx.StrokeStyle = 'rgba(255,0,0,0.5)'; >

Sieht richtig aus?

Aber es scheint, dass uns das beim Zeichnen der Grenze sehr verwirrt. Müssen wir jedes Mal diese deprimierenden 0,5 hinzufügen? Natürlich nicht, denn die meiste Zeit, in der wir Variablen zum Speichern von Werten verwenden, müssen wir nicht zu jedem Wert 0,5 hinzufügen Darüber hinaus müssen wir uns bei Zeilen mit lineWidth>1 darüber keine Sorgen machen: weil Nur wenn die Linienbreite 1 Pixel beträgt, ist dieses Problem am offensichtlichsten.