Heim > Artikel > Web-Frontend > Die auf der HTML5-Leinwand gezeichneten Linien sehen verschwommen aus
Die auf der HTML5-Leinwand gezeichneten Linien sehen verschwommen aus
- WBOYnach vorne
- 2023-09-08 20:45:051114Durchsuche
Bei der Aufgabe, die wir in diesem Artikel ausführen werden, geht es um das Zeichnen von HTML5-Leinwänden. Beispielsweise sehen die Linien verschwommen aus.
Wir haben einen Unschärfeeffekt beobachtet, da verschiedene Geräte unterschiedliche Pixelverhältnisse haben. Der Browser oder das Gerät, mit dem die Leinwand angezeigt wird, hat oft Einfluss darauf, wie unscharf das Bild ist.
Das Pixelverhältnis-Widget der Fensteroberfläche gibt das Verhältnis der physischen Pixel des Anzeigegeräts zu seiner CSS-Pixelauflösung zurück. Diese Zahl kann auch als Verhältnis von physischen zu CSS-Pixeln oder als die Größe eines Pixels zum anderen verstanden werden.
Sehen wir uns das folgende Beispiel an, um mehr über das Zeichnen von HTML5-Leinwänden zu erfahren, z. B. über verschwommene Linien.
Beispiel 1
Im folgenden Beispiel haben wir einfachen Text unkenntlich gemacht, um ihn klarer zu machen.
Wir denken über dieses verschwommene Bild nach
<!DOCTYPE html>
<html>
<body>
<canvas id="my tutorial"
style="border:1px solid black;">
</canvas>
<script>
var canvas = document.getElementById('my tutorial');
var ctx = canvas.getContext('2d');
window.devicePixelRatio=2;
var size = 170;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
var scale = window.devicePixelRatio;
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
ctx.scale(scale, scale);
ctx.font = '10px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var x = size / 2;
var y = size / 2;
var textString = "TUTORIALSPOINT";
ctx.fillText(textString, x, y);
</script>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Textausgabe, die wir als Beispiel oben betrachtet haben, ohne dass es unscharf wird.
Beispiel 2
Wenn man bedenkt, dass unsere Zeichnung etwas verschwommen aussieht.
<!DOCTYPE html>
<html>
<style>
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}
</style>
<body>
<table>
<tr><td>Line on canvas:</td></tr>
<tr><td><canvas id="tutorial" width="100" height="100"></td><td><div> </div></td></tr>
</table>
<script>
var ctx = document.getElementById("tutorial").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();
</script>
</body>
</html>
Wenn Sie das obige Skript ausführen, erscheint das Ausgabefenster mit einer verschwommenen Linie auf der Leinwand und einem 1-Pixel-Rand auf der Webseite.
Das obige ist der detaillierte Inhalt vonDie auf der HTML5-Leinwand gezeichneten Linien sehen verschwommen aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!