Html canvas lineto () zeichnet mit falschen Y -Koordinaten [geschlossen] ⇐ HTML

[Anonymous]

Erreichen klarer Linien in HTML -Leinwand erfordert das Einstellen der CSS -Leinwandhöhe und der Breite, um die Höhe und das Pixel -Verhältnis von Breite /Gerät zu sein: < /p>

Code: Select all

this.element.style.height = this.element.height / dpr + "px";
this.element.style.height = this.element.height / dpr + "px";

Ein unglückliches Ergebnis davon ist, dass der Befehl lineto jetzt falsch ist. Zum Beispiel, wenn ich ein Quadrat zeichne wie: < /p>

Code: Select all

ctx.lineTo(113.395,54.233);
ctx.lineTo(120.791,54.233);
ctx.stroke();

ctx.lineTo(120.791,54.233);
ctx.lineTo(120.791,46.837);
ctx.stroke();

ctx.lineTo(120.791,46.837);
ctx.lineTo(113.395,46.837);
ctx.stroke();

ctx.lineTo(113.395,46.837);
ctx.lineTo(113.395,54.233);
ctx.stroke();

Das Ergebnis ist nicht quadratisch: