Wie baue ich ein transformiertes Bild auf javascript Das Segeltuch für HTML5 und CSS3 Programmierung
Transformations sind mathematische Operationen in javascript, die auf jede Zeichnung oder ein Bild auf HTML5 und CSS3-Seite, um das Aussehen zu verändern angewendet werden kann. Es gibt drei große Veränderungen:
Übersetzung: Bewegen Sie eine bestimmte Menge in X und Y
Drehung: Drehen Sie um einen bestimmten Punkt
Rahmen: Ändern der Größe der Zeichnung in X und Y
Das Element erlaubt es, alle diese Operationen auf jede Art von Zeichnung. Allerdings wird die Art und Weise das Element tut dies ein wenig näher an Mathematik als vorher bekommen haben. Transformationen im Canvas-Element kann hart sein, zu verstehen, bis Sie ein wenig über zu verstehen, wie sie wirklich funktionieren.
In der Mathematik, transformieren Sie nicht wirklich Objekte. Stattdessen ändern Sie die Koordinatensystem, und ziehen Sie Ihr Bild in der neu System transformiert koordinieren. Es ist in einem Vektor-Zeichenprogramm gemeinsam mehrere versteckte Koordinatensysteme zu haben, auf einmal zu arbeiten. Das ist wichtig, weil es die Art und Weise Leinwand Transformationen arbeiten ist. Im Wesentlichen Transformationen auf ein Objekt, wenn Sie ausführen möchten, müssen Sie Folgendes tun:
Kündigen Sie den Beginn eines temporären Koordinatensystems.
Das Hauptbild hat bereits seine eigenen Koordinatensystem, das sich nicht ändern. Bevor Sie etwas verändern können, müssen Sie ein neues Koordinatensystem zu bauen, um diese Änderungen zu halten. Das sparen() Befehl gibt den Beginn einer neuen Koordinatensystemdefinition.
Bewegen Sie das Zentrum mit Übersetzen().
Der Ursprung (0, 0) beginnt in der linken oberen Ecke der Leinwand in der Standardeinstellung. Normalerweise werden Sie Ihre transformierten Objekte auf dem (neu) Herkunft bauen und den Ursprung bewegen das Objekt zu platzieren. Wenn du übersetzen (50, 50) und dann ein Bild bei (0, 0) zu zeichnen, wird das Bild mit dem Ursprung des temporären Koordinatensystems gezeichnet, die bei (50, 50) in der Haupt Leinwand.
Drehen Sie das Koordinatensystem mit drehen().
Das drehen() Befehl dreht das neue Koordinatensystem um seine Herkunft. Der Rotationsparameter ist ein Grad in Radiant.
Skalieren Sie das Koordinatensystem in X und Y.
Sie können auch das neue Koordinatensystem durch die Anwendung X- und Y-Skalenwerte ändern. Dies ermöglicht Ihnen, gestreckt und gestaucht Bilder zu erstellen.
Erstellen Sie Elemente in das neue System zu koordinieren.
Nachdem Sie alle Transformationen wollen Sie sich beworben haben, können Sie alle gewöhnlichen Leinwand Zeichentechniken verwenden. Allerdings werden diese Zeichnungen in der "virtuellen" Koordinatensystem gezeichnet Sie gerade gemacht, nicht im Hauptkoordinatensystem der Leinwand.
Schließen Sie das temporäre Koordinatensystem.
Im Allgemeinen sollten Sie verschiedene Transformationen, um verschiedene Teile der Leinwand zu beantragen. Wenn Sie mit einer bestimmten Transformation fertig sind, verwenden Sie die wiederherstellen() gebieten, das neue Koordinatensystem zu schließen. Alle nachfolgenden Zeichnungsbefehle wird das Standardkoordinatensystem des Objekts.