Lösung des Problems des Zeichnens von Schriftarten, Bildern und verschwommenen Grafiken im HTML5-Canvas

Problem mit der Unschärfe von Schriftarten, Bildern und Grafiken auf der HTML5-Leinwand

Vorkommen

Tritt häufig auf Geräte mit hoher Auflösung, das bedeutet mehr Pixel pro Quadratzoll, wie z. B. Telefone und Tablets. Natürlich verfügen viele High-End-Desktop-Computer auch über hochauflösende und hochauflösende Monitore.

Das Skalierungsprinzip von Canvas im Browser

Wenn der Stil nicht festgelegt ist, Verwenden Sie dann die HTML-Attribute Breite und Höhe als Abmessungen.

Wenn die Breite und Höhe im Stil festgelegt sind, ist die Stileinstellung die endgültige Größe, die im Browser angezeigt wird.

Mit anderen Worten, die Breite und Höhe in den Attributen stellen nicht die tatsächliche Breite und Höhe dar, sodass die Leinwand bei hoher Auflösung vergrößert wird, was zu Unschärfe führt.

Die Breiten- und Höhenattribute der Leinwand sind die Größe des hinteren Puffers der Leinwand, die nach dem Zeichnen im Browser entsprechend der aktuellen dpi skaliert wird.

devicePixelRatio (Fenstermitglied) speichert das Verhältnis der Breite/Höhe des Attributs, das im Zustand mit hoher Auflösung vergrößert wird.

Fehlerlösungsfall

Unschärfe der Online-Suchleinwand, Es wird zwei Lösungen geben, die jetzt möglicherweise nicht geeignet sind.

Eine davon ist CanvasRenderingContext2D.translate(0.5,0.5);

Dies wird tatsächlich häufig im Bereich des 3D-Zeichnens verwendet, um den Pixelversatz zu handhaben Der 2D-Kontext von Move, Canvas hat sich bereits mit diesem Problem befasst.

Der andere BackingStorePixelRatio wird im neuen Browser entfernt und existiert nicht mehr.

var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1

Ich habe während der Recherche die Methode zum dynamischen Erstellen einer Leinwand verwendet. Die Breite/Höhe des Stils wird mit dem Skalierungsverhältnis devicePixelRatio multipliziert Ermitteln Sie die Eigenschaften der Leinwand. <code>我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br>

Dies ist keine perfekte Lösung, da dies geschieht, wenn sich die dpi des Browsers ändert, z. B. durch Benutzereinstellungen, oder wenn das Fenster von einem Monitor mit hoher dpi auf einen Monitor mit niedriger dpi verschoben wird . (Mein 1080p-normaler 23-Zoll-Monitor ist 1,25-fach und das Tablet ist 2,0-fach. Das Ziehen und Ablegen von Fenstern erfolgt)

Lösung
1. Erstellen und überwachen Sie das Onresize-Ereignis des Fensters dynamisch zu devicePixelRatio Canvas neu erstellen.
2. Passen Sie die Breite und Höhe des Canvas-Stils dynamisch an und überwachen Sie auch das Onresize-Ereignis. Arbeiten Sie dann mit CanvasRenderingContext2D.scale zusammen, um den Anteil des gezeichneten Inhalts dynamisch zu skalieren.

Browser haben keine DevicePixelRatio-Änderungsereignisse oder dpi-Änderungsereignisse. Wenn Sie es wissen, hinterlassen Sie bitte eine Nachricht.

Das obige ist der detaillierte Inhalt vonLösung des Problems des Zeichnens von Schriftarten, Bildern und verschwommenen Grafiken im HTML5-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!