HTML5 Canvas implementiert das Zeichnen einer pixelbreiten dünnen Linie

Zeichnen Sie eine pixelbreite dünne Linie, um sie zu implementieren. Achten Sie besonders darauf, dass alle Ihre Koordinatenpunkte Ganzzahlen sind. Andernfalls implementiert HTML5 automatisch Kantenantialiasing das Rendering

Der folgende Code im orthodoxen HTML5 Canvas

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

Das Ergebnis der Operation ist keine Linie mit einer Pixelbreite

Es fühlt sich an so dick, wie die übliche Die verschiedenen Strichzeichnungseffekte der Webversion

Hat HTML5 Canvas es nicht besser gemacht

Tatsächlich ist der grundlegende Grund dafür Das Zeichnen der Leinwand beginnt nicht in der Mitte

Es wird von 0 bis 1 gezeichnet, nicht von 0,5 bis 1 + 0 bis 0,5, sodass

dazu führt, dass die Überblendung am Rand erfolgt Die Linie sieht sehr breit aus.

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 gepackt

/** 
* <p> draw one pixel line </p> 
* @param fromX 
* @param formY 
* @param toX 
* @param toY 
* @param backgroundColor - default is white 
* @param vertical - boolean 
*/ 
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) { 
var currentStrokeStyle = this.strokeStyle; 
this.beginPath(); 
this.moveTo(fromX, fromY); 
this.lineTo(toX, toY); 
this.closePath(); 
this.lineWidth=2; 
this.stroke(); 
this.beginPath(); 
if(vertical) { 
this.moveTo(fromX+1, fromY); 
this.lineTo(toX+1, toY); 
} else { 
this.moveTo(fromX, fromY+1); 
this.lineTo(toX, toY+1); 
} 
this.closePath(); 
this.lineWidth=2; 
this.strokeStyle=backgroundColor; 
this.stroke(); 
this.strokeStyle = currentStrokeStyle; 
};

Der Code der Zentrumsübersetzungsmethode 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, sonst implementiert HTML5 automatisch Kanten-Anti-Aliasing

und führt dazu, dass Ihre gerade Linie mit einem Pixel dicker aussieht.

Bedienungseffekt:

Wie ist der Effekt jetzt? Es gibt einen Daumen hoch.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

HTML5-Canvas-Implementierung zum Zeichnen nicht geschlossener Pfade und Verlaufsfüllmethoden

HTML5-Canvas-Implementierung Zeichnen von geraden Linien und Festlegen von Linienstilen

Das obige ist der detaillierte Inhalt vonHTML5 Canvas implementiert das Zeichnen einer pixelbreiten dünnen Linie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!