Wie wir alle wissen, handelt es sich bei der Leinwand um eine Bitmap, und Sie können darin rendern, was Sie möchten, aber Sie können es nur bearbeiten, indem Sie die Eigenschaften der Leinwand bearbeiten. Das heißt, Sie können in die Leinwand gezeichnete Dinge nicht manipulieren, wenn ich zum Beispiel ein Gemälde zur Leinwand hinzufüge und das Gemälde nun um 10 Pixel verschieben möchte, können wir das Gemälde nicht direkt manipulieren, da wir das Gemälde überhaupt nicht erhalten können . alle Informationen. Alles, was wir jemals bekommen können, ist das Canvas-Objekt.
Hier stellt sich nun die Frage: Wie drehe ich das Bild?Tatsächlich bietet Canvas verschiedene Schnittstellen zur Steuerung der Leinwand. Für die Drehung gibt es eine Methode „rotate()“.
Tatsächlich dreht die Drehung hier die Leinwand nicht wirklich. Beispielsweise dreht sich mein ctx.rotate(Math.PI/2) um 90°. Das bedeutet nicht, dass wir die Leinwand auf der Seite um 90° gedreht sehen. Wir können verstehen, dass die Leinwand tatsächlich aus zwei Teilen besteht, einer ist die mit bloßem Auge sichtbare Leinwand und der andere ist die virtuelle Leinwand, die für Operationen verwendet wird. Alle unsere Aktionen auf der virtuellen Leinwand werden auf die reale Leinwand abgebildet.
Es kann schwierig sein, dies zu verstehen. Verwenden wir daher ein Bild, um es zu erklären. Lassen Sie uns zunächst die Methode „rotate()“ vorstellen. Sie kann die Leinwand drehen und den Ursprung der Leinwand drehen.
Werfen wir einen Blick auf den Effekt einer Drehung um 45°:
Hier können wir sehen, dass die gerade erwähnte virtuelle Leinwand um 45° gedreht wird und dann ein Bild in die virtuelle Leinwand eingefügt wird. Die reale Leinwand stellt dann den Schnittpunkt der virtuellen Leinwand und der realen Leinwand dar. Es ist hier möglicherweise nicht leicht zu verstehen, bitte denken Sie sorgfältig darüber nach.
Der Code für die beiden Bilder lautet wie folgt:
// Nicht gedreht var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// Drehung gegen den Uhrzeigersinn um 45° var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)Angesichts dessen denke ich, dass im Grunde jeder weiß, wie man rotation() verwendet.
Lassen Sie uns darüber sprechen, wie Sie die Bildmitte drehen
Lassen Sie mich über die Verwendung der beiden anderen Canvas-Methoden sprechen:
ctx.translate(x, y): Diese Methode ist eine Methode, die den Ursprung der Leinwand verschieben kann. Die Parameter sind x und y;
ctx.drawImage(img, x, y): Diese Methode wurde oben verwendet, verfügt jedoch über drei Parameter. Der erste ist der Dom des einzufügenden Bildes und die nächsten beiden x und y sind die Parameter für img when Einfügen des Bildes. Der Speicherort wird geändert.
Wie auf dem Bild zu sehen ist, müssen Sie, wenn Sie das Bild um 45° drehen möchten, den Ursprung der Leinwand in die Mitte des Bildes verschieben, dann die Leinwand drehen und dann beim Einfügen des Bildes Verschieben Sie das Bild um die Hälfte des Bildes selbst in die obere linke Ecke.
Hier gibt es drei Schritte:
Schauen wir uns diese drei Schritte separat an (die Breite und Höhe des Bildes betragen 400 und 300).
Leinwandursprung verschieben
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)Leinwand drehen
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)Bild einfügen und verschieben
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)Das ist es, Sie sind fertig
ps: Nach Abschluss einer Reihe von Aktionen muss jeder den Ursprung der Leinwand drehen, um ihn wiederherzustellen. Andernfalls werden die Canvas-Einstellungen nach einer Reihe von Vorgängen durcheinander gebracht. Stellen Sie einfach nach jedem Vorgang die Einstellungen wieder auf den ursprünglichen Zustand her.
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// Einstellungen wiederherstellen (die Schritte zum Wiederherstellen sollten zu den von Ihnen geänderten Schritten umgekehrt werden) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// Danach wird der Ursprung des Die Leinwand kehrt zum oberen linken Winkel zurück, der Drehwinkel beträgt 0 // Andere Operationen ...Beachten Sie außerdem, dass es sich bei dem, was ich gerade demonstriert habe, um ein Beispiel handelt, bei dem die x-Achse und die y-Achse des Bildes relativ zur Leinwand 0 sind. Wenn sie nicht 0 ist, verschieben Sie einfach den Ursprung ctx.translate(200+x, 150 +J). Die 200 und 150 sind hier die Hälfte der Breite und Höhe des Bildes, und x und y sind die x- und y-Werte des Bildes relativ zur Leinwand.
In diesem Artikel geht es nur um die Drehung in der Bildmitte. Später werde ich über die Drehung und Skalierung des Bildes schreiben. Wenn etwas schlecht geschrieben oder falsch ist, weisen Sie bitte darauf hin.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.