Aufgetretene Probleme: html/11467.html">Der Grund, warum das Canvas-Element deformiert und verzerrt ist
Es gibt drei Größen für ein DOM-Element: Stilgröße, HTML-Größe und CSS-Größe.
Bei Verwendung des Canvas-Elements beträgt die Standardbreite und -höhe des Canvas-Elements 300 Pixel * 150 Pixel. Die Standardgröße ist hier die HTML-Größe.
Nehmen Sie zum besseren Verständnis die Malerei als Beispiel. Die Zeichenfläche hat CSS- oder Stilgröße und die Leinwand hat HTML-Größe.
Wenn wir nicht die HTML-Größe des angegebenen Canvas-Elements anzeigen, sondern seine CSS-Größe in der CSS-Datei angeben. Das Ergebnis ist sehr verwirrend.
Beispielsweise zeichnen wir einen Kreis mit einem Radius von 50 Pixel auf einer Standardleinwand von 300 Pixel * 150 Pixel.
<html lang=zh><head> <meta charset=UTF-8> <title>canvas size</title> <style> #canvas { width: 200px; height: 200px } </style></head><; body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const canvas = document.getElementById(canvas); const ctx = canvas.getContext(2d); ctx.StrokeStyle = #aaaaaa; closePath(); };</script></body></html>Die angezeigten Endergebnisse lauten wie folgt:
Es ist ersichtlich, dass die Größe der Leinwand tatsächlich 200 * 200 beträgt. Aber der Kreis hat sich in eine Ellipse verwandelt und die Form hat sich verformt. Warum ist das so?
Was passiert, wenn die per CSS festgelegte Größe entfernt wird?
Es ist ersichtlich, dass die Grafik zu diesem Zeitpunkt normal ist. Die Größe der Leinwand beträgt tatsächlich standardmäßig 300 * 150.
Aus Vergleich und Vorstellung können wir folgende Schlussfolgerungen ziehen:
Zunächst haben wir einen Kreis auf die Leinwand von 300150 gezeichnet. Nachdem die Zeichnung abgeschlossen ist, möchten wir die Größe der Leinwand auf 200200 ändern. Gleichzeitig ist die Leinwand immer noch dieselbe Leinwand und wird nicht geändert.
Was funktioniert, ist, die Leinwand zu dehnen. Unter der Annahme, dass die Leinwand elastisch ist, dehnt sich eine Leinwand von 300150 bis 200200. Die große Halbachse des Kreises auf der Leinwand wird auf das 1,33-fache der Originalgröße und die kleine Halbachse auf das 0,68-fache vergrößert. An diesem Punkt ist der Kreis natürlich eine Ellipse.
abschließend:Wenn Sie Canvas zum Zeichnen verwenden, müssen Sie, um unnötige Probleme zu vermeiden, daran denken, die Breite und Höhe der HTML-Größe für das Canvas-Element festzulegen.
ZusammenfassenDas Obige ist eine kurze Analyse der Auswirkungen der vom Editor eingeführten HTML- und CSS-Größe auf das visuelle Element. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht Der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!