Was bedeutet Leinwand?

Was bedeutet Leinwand?

Canvas bedeutet auf Englisch „Leinwand“, aber das hier erwähnte Canvas ist ein neues Element in HTML5, auf dem Entwickler eine Reihe von Grafiken zeichnen können. Die Schreibmethode von Canvas in der HTML-Datei ist sehr einfach:

<canvas id="canvas" width="宽度" height="高度"></canvas>

Das id-Attribut kann von allen HTML-Elementen verwendet werden. Die einzigen Attribute, die mit Canvas geliefert werden, sind die letzten beiden (die jeweils die Breite und Höhe steuern). , und es gibt keine anderen . Was die Kompatibilität betrifft, gibt CanIUse an, dass die Grundfunktionen derzeit von 90 % der von Benutzern verwendeten Browser unterstützt werden, sodass sie in den meisten Fällen bedenkenlos verwendet werden können.

Beachten Sie, dass Sie die mit Canvas gelieferten Breiten- und Höheneigenschaften verwenden müssen und nicht CSS zur Steuerung verwenden, da die CSS-Steuerung zu einer Verformung des Canvas führt. Sie können versuchen, es mit PhptpShop zu vergleichen. Letzteres ändert die „Bildgröße“, während ersteres die richtige Methode zum Ändern der „Leinwandgröße“ ist. Das Bild unten ist beispielsweise ein horizontales Zusammenfügen von drei Bildern: Das schwarze Feld ganz links ist das Originalbild mit einer Größe von 50 Pixel * 50 Pixel; das mittlere ist der Effekt der Änderung der Bildgröße auf 100 Pixel * 100 Pixel wird verschwommen, aber für das Bild selbst wird gesagt, dass der Koordinatenbereich ganz rechts nicht die richtige 100px * 100px-Leinwand ist.

Die meisten Zeichenmethoden von Canvas haben nichts mit dem -Tag zu tun und erfordern JavaScript, um mit ihnen zu arbeiten. Dies ist die sogenannte Canvas-API.

Wir erhalten zuerst dieses Element:

var canvas = document.getElementById('canvas');

Dann verwenden Sie eine Methode, um den Eingang zu erhalten, der alle Canvas-APIs aufrufen kann:

var ctx = canvas.getContext('2d');

Sind Sie gespannt auf 2d Is? es 3D? Es gibt keine 3D-Schreibmethode, aber wenn Sie die Tür zur 3D-Welt öffnen möchten, können Sie canvas.getContext('webgl') schreiben. Allerdings handelt es sich bei WebGL um eine Reihe von Standards, die auf OpenGL ES 2.0 basieren, was sich völlig von diesem Artikel unterscheidet und daher hier nicht besprochen wird.

Das obige ist der detaillierte Inhalt vonWas bedeutet Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!