So lösen Sie das Problem verschwommener Schriftarten, Bilder und Grafiken, die auf der HTML5-Leinwand gezeichnet werden

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, dann das Breitenattribut von HTML Als Größe wird die Höhe verwendet.

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

Suchen Sie online nach Leinwandunschärfe, es gibt zwei Lösungen Die Methode ist derzeit möglicherweise nicht geeignet.

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

我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br/>

Dies ist keine perfekte Lösung, da sich die DPI des Browsers ändert, z. B. Benutzereinstellungen oder das Verschieben des Fensters von einem Monitor mit hoher DPI. Tritt auf, wenn Monitore mit niedriger Auflösung angezeigt werden. (Mein normaler 23-Zoll-Monitor mit 1080p ist 1,25-fach und das Tablet 2,0-fach. Das Ziehen und Ablegen von Fenstern erfolgt)

<code><span style="font-size: 14px"><strong><span style="font-family: Microsoft YaHei">解决方法</span></strong></span><br/><span style="font-family: Microsoft YaHei; font-size: 14px">1、动态创建并监视window的onresize事件，根据<span style="font-family: Consolas">devicePixelRatio</span>重建canvas。<br/>2、动态调整canvas样式的宽高，同样监视onresize事件。再配合<span style="font-family: Microsoft YaHei">CanvasRenderingContext2D.scale动态缩放绘制内容的比例。</span><br/></span><span style="font-family: Microsoft YaHei; font-size: 14px">浏览器都没有devicePixelRatio改变的事件，或者dpi改变的事件，如果你知道，请留言。</span><br/></code>

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem verschwommener Schriftarten, Bilder und Grafiken, die auf der HTML5-Leinwand gezeichnet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!