Fertigkeiten zum Zeichnen von HTML5-Canvas-Strichen – Zeichnen einer dünnen Linie mit einer Breite von einem Pixel_HTML5-Tutorial-Fähigkeiten

Der folgende Code im orthodoxen HTML5 Canvas

Kopieren Sie den Code

Der Code lautet wie folgt:

ctx.lineWidth = 1;
ctx.beginPath();
ctx.lineTo(300,100); 🎜>

Die als Ergebnis der Operation gezeichnete Linie ist keine Linie mit einer Breite von einem Pixel

Sie fühlt sich so dick an, dass sie sich stark von den verschiedenen Linienzeichnungen unterscheidet Effekte, die oft in der Webversion zu sehen sind
Dasselbe, hat HTML5 Canvas nicht darüber nachgedacht, es besser zu machen

Tatsächlich liegt der Hauptgrund darin, dass das Zeichnen von Canvas nicht in der Mitte beginnt

aber von 0 bis 1, nicht von 0,5 bis 1 0 ~0,5 Zeichenmethode, sodass

dazu führt, dass die Überblendung am Rand erfolgt und die Linie sehr breit aussieht.

Es gibt zwei Lösungen, eine ist die Versetzungsabdeckungsmethode und die andere ist die Zentrumsübersetzung

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

Versetzungsabdeckungsmethode Ich habe sie in eine Funktion des ursprünglichen Kontexts verpackt

Code kopieren

Der Code lautet wie folgt:

/**

*

Zeichne eine Pixellinie

* @param vonX
* @param formY
* @param zu >*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertikal) {
var currentStrokeStyle = this.beginPath();
this.moveTo(fromX, fromY); .closePath();
this.lineWidth=2;
this.beginPath();
this.moveTo(fromX 1, fromY);
this.lineTo(toX 1, toY 1); >}
this.closePath ();
this.StrokeStyle=BackgroundColor;
This.StrokeStyle = CurrentStrokeStyle; };


Der Code der zentralen Übersetzungsmethode lautet wie folgt:





Kopieren Sie den Code


Der Code lautet wie folgt:


ctx.save();
ctx.translate(0.5,0.5);
ctx.lineWidth = 1; ;
ctx.moveTo(10, 100);
ctx.line(300,100);
ctx.restore(); Achten Sie besonders darauf, dass alle Ihre Koordinatenpunkte ganze Zahlen sind, da HTML5 andernfalls dazu führt, dass eine Ihrer geraden Pixellinien dicker aussieht.

Bedienungseffekt:

Wie sieht es jetzt aus? Dies ist ein kleiner Trick für das HTML5-Canvas-Strichzeichnen.

Bitte geben Sie einen Daumen nach oben, wenn es so klingt Gut.