Codedetails zum Zeichnen einer pixelbreiten dünnen Linie in HTML5 Canvas

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 Zeile mit einer Pixelbreite

Es fühlt sich so dick an, dass es sich stark von den verschiedenen Zeichenlinieneffekten unterscheidet, die oft in der Webversion zu sehen sind

. Handelt es sich um HTML5? Canvas hatte nicht erwartet, dass es besser wird

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

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

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

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;
};

center Der Code der Ü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 ganze Zahlen sind, andernfalls wird dies bei HTML5 der Fall sein Automatisches Kanten-Anti-Aliasing implementieren

Es führt auch dazu, dass eine Ihrer geraden Pixellinien dicker aussieht.

Betriebseffekt:

Was ist der Effekt jetzt? Dies ist die HTML5-Canvas-Zeile Zeichnen Ein kleiner Trick

Wenn Sie es gut finden, geben Sie ihm bitte einen Daumen nach oben.

Das Obige sind die Codedetails zum Zeichnen einer pixelbreiten dünnen Linie in HTML5 Canvas. Für weitere verwandte Inhalte achten Sie bitte auf PHP Chinesische Website (www.php.cn)!