Ausführliche Erklärung des Unterschieds zwischen Breite, Höhe und Stil in der H5-Leinwand

Kürzlich bin ich beim Erlernen der Leinwandeigenschaften auf ein kleines Problem gestoßen, nämlich die Breite und Höhe der Leinwand. Ich habe es schließlich durch die Suche nach relevanten Informationen gelöst, daher werde ich im Folgenden nicht viel über den Lösungsprozess sagen Schauen Sie sich die Details an

1. Bei Verwendung des Breiten-Höhe-Attributs wird die Anzeige nicht wie folgt gestreckt:

 <canvas id=mycanvas width=300 height=300>Der Browser unterstützt Canvas nicht, bitte aktualisieren Sie oder verwenden Sie einen anderen Browser! </canvas><script type=text/javascript> var canvas = document.getElementById(mycanvas), ctx = canvas.getContext('2d'); ctx.lineTo(300,150); .Stroke();</script>

Der Laufeffekt ist wie folgt: eine diagonale Linie

2. Bei Verwendung von Stil wird das Bild gestreckt (verformt).

 <style> #mycanvas { width: 150px; height: 150px } </style>;

Betriebseffekt

Leinwand ist ein Zeichenbrett und ein Zeichenpapier. Das Zeichenbrett entspricht einem Behälter. Auf dem Zeichenpapier wird gezeichnet/gearbeitet.

Die Standardbreite und -höhe des Zeichenbretts und des Zeichenpapiers betragen 300 * 150. Wenn die Breite und Höhe des Zeichenpapiers und des Zeichenbretts gleich sind, wird das Bild nicht gestreckt Das Zeichenbrett ist unterschiedlich, das Bild wird gestreckt (verformt).

1. Mit den Attributen „Breite“ und „Höhe“ werden die Breite und Höhe des Zeichenbretts und des Zeichenpapiers festgelegt.

Beispiel: Breite = 300 Höhe = 300 bedeutet, dass die Breite und Höhe des Zeichenbretts 300 * 300 beträgt und die Breite und Höhe des Zeichenpapiers ebenfalls 300 * 300 beträgt. Das Bild mit der Diagonale 300 * 300 beträgt nicht gestreckt werden.

2. Im Stil sind nur die Breite und Höhe des Zeichenbretts festgelegt. Die Breite und Höhe des Zeichenpapiers beträgt weiterhin den Standardwert 300 * 150.

(Nehmen Sie das obige Bild als Beispiel.) Daher wird nur ein Teil des Bildes mit der Diagonale 300 * 300, an dem Sie arbeiten, wie folgt auf das Zeichenpapier gezeichnet:

Übrigens lässt das Zeichenpapier das Zeichenbrett nicht leer, daher müssen das Zeichenpapier und das Bild auf die gleiche Größe wie das Zeichenbrett gedehnt werden. In diesem Beispiel betragen die Breite des Zeichenpapiers und die Breite der Zeichenfläche jeweils 30, und die Höhe beträgt die Hälfte der Zeichenfläche, sodass Sie die Höhe nur um das Doppelte strecken müssen, damit das Bild auch gestreckt und ausgedünnt wird Die X-Richtung bleibt unverändert und die Y-Richtung wird verdoppelt, sodass wir das deformierte Bild erhalten.

Bezüglich der Breiten- und Höheneinstellungen von Canvas in HTML5

Das Canvas-Element ist standardmäßig 300 Pixel breit und 150 Pixel hoch. Um seine Breite und Höhe festzulegen, können Sie die folgende Methode verwenden (es wird nicht gestreckt):

Methode eins:

<canvas width=500 height=500></canvas>

Methode 2: Verwenden Sie die HTML5-Canvas-API, um den Betrieb in Ordnung zu bringen

var canvas = document.getElementById('die ID der Leinwand, die Sie bedienen möchten');

canvas.width = 500;

canvas.width = 500;

Wenn Breite und Höhe mit der folgenden Methode festgelegt werden, wird das Canvas-Element von der Originalgröße auf die festgelegte Breite und Höhe gestreckt:

Methode 1: Durch die Verwendung von CSS wird das gedehnt

#Um die ID der Leinwand zu bedienen{

Breite: 1000 Pixel;

Höhe: 1000 Pixel;

｝

Methode 2: Vorgänge, die die HTML5-Canvas-API verwenden, werden gestreckt

var canvas = document.getElementById('die ID der Leinwand, die Sie bedienen möchten');

canvas.style.width = 1000px;

canvas.style.height = 1000px;

Methode 3: Mit jquery wird $(#id).width(500); gestreckt

Sonstiges: Die Breite und Höhe der Leinwand können nicht in Prozent ausgedrückt werden. Canvas zeigt den Prozentsatz als numerischen Wert an

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Referenzwert für das Studium oder die Arbeit aller hat. Wenn Sie Fragen haben, können Sie eine Nachricht für die Kommunikation hinterlassen Netzwerk.