HTML5 Canvas -Zeichnungsfähigkeiten - um eine dünne Linie zu zeichnen, die von Pixel breit ist

Kommentar: Zeichnen Sie eine dünne Linie mit einer Pixelbreite. Bei der Verwendung von HTML5-Canvas-Implementierung achten Sie besonders darauf, dass alle Ihre Koordinatenpunkte Ganzzahlen sind, andernfalls erreicht HTML5 automatisch Edge-Aliasing. Interessierte Freunde können das Effektdiagramm sehen

ctx.linewidth = 1;

ctx.beginPath ();

ctx.moveto (10, 100);

ctx.lineto (300.100);

ctx.stroke ();

Das Ergebnis der Operation ist keine Pixelbreitlinie

Wie dick es sich anfühlt und es ist üblich, verschiedene Effekte der Linienzeichnung in der Webversion zu sehen

Ganz anders, haben Sie nicht gedacht, dass HTML5 -Leinwand es besser machen würde?

Tatsächlich ist der grundlegende Grund, dass die Zeichnung von Leinwand nicht von der Mitte beginnt.

Stattdessen wird es von 0 bis 1 gezeichnet, nicht von 0,5 bis 1 + 0 bis 0,5, also

Dies führt zum Verblassen am Rand und sieht sehr weit in der Schlange aus.

Es gibt zwei Lösungen, eine ist die Versicherungsmethode für Fehlausrichtungen, und der andere ist das Zentrum

Übersetzung (0,5,0,5). Der Implementierungscode lautet wie folgt:

Ich habe die fehlgeleitete Overlay -Methode in eine Funktion des ursprünglichen Kontextes eingewickelt

/**

* <p> Eine Pixellinie zeichnen </p>

* @param fromx

* @param formy

* @param tox

* @param Toy

* @Param HintergrundColor - Standard ist weiß

* @param vertikal - boolean

*/

CanvasrendereringContext2d.prototype.onepixellineto = Funktion (fromx, von tox, spielzeug, backgroundColor, vertikal) {

var currentStrokestyle = this.strokestyle;

this.beginPath ();

this.moveto (fromx, fromy);

this.lineto (Tox, Spielzeug);

this.closepath ();

this.linewidth = 2;

this.stroke ();

this.beginPath ();

if (vertikal) {

this.moveto (fromx+1, fromy);

this.lineto (Tox+1, Spielzeug);

} anders {

this.moveto (fromx, vony+1);

this.lineto (Tox, Spielzeug+1);

}

this.closepath ();

this.linewidth = 2;

this.strokestyle = backgroundColor;

this.stroke ();

this.strokestyle = currentStrokestyle;

};

Der zentrale Code für Übersetzungsmethoden lautet wie folgt:

ctx.save ();

ctx.translate (0,5,0,5);

ctx.linewidth = 1;

ctx.beginPath ();

ctx.moveto (10, 100);

ctx.lineto (300.100);

ctx.stroke ();

ctx.restore ();

Achten Sie besonders darauf, dass alle Ihre Koordinatenpunkte Ganzzahlen sind

Dies führt dazu, dass einer Ihrer Pixel dicker aussieht.

Laufeffekt:

Was ist jetzt der Effekt? Dies ist ein Tipp zum Zeichnen von Linien in HTML5 -Leinwand

Wenn Sie denken, dass es gut ist, probieren Sie es bitte aus.