Verwenden von Grafik mit Canvas, SVG und CSS3 (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
In diesem Abschnitt erfahren Sie mehr zur Verwendung von Grafiken in Windows Store-Apps mit JavaScript.
Inhalt dieses Abschnitts
| Thema | Beschreibung |
|---|---|
Das canvas-Element erzeugt eine rechteckige Bitmap-Zeichenfläche auf Ihrer Seite, auf der Sie mit JavaScript direkt zeichnen können. Die Canvas eignet sich hervorragend für die Entwicklung von Spielen oder für Situationen, in denen Sie Grafiken in Echtzeit erstellen oder in regelmäßigen Abständen ändern müssen. |
|
Das Canvaselement ist ein Zeichenbereich im HTML-Dokument, in dem Sie mit JavaScript Grafiken wie beispielsweise Animationen, Diagramme und Spiele generieren können. Dieses Thema erleichtert Ihnen mit einer Beschreibung der Schritte zum Animieren einer einfachen Zeichnung mit dem Canvaselement den Einstieg. |
|
Formen und Linien sind nicht auf Volltonfarben begrenzt. Ein auf der Canvas verwendeter Farbverlauf ist tatsächlich eine Art von Farbwert und kann daher auf die Eigenschaften "fillStyle" und "strokeStyle" angewendet werden. Farbverläufe können verwendet werden, um eine in eine Richtung verlaufende Änderung der Intensität oder Farbe eines Bilds zu erzeugen. Dies ist hilfreich, wenn Sie Hintergrundbilder erzeugen, Höhen auf Karten angeben oder an beliebigen anderen Stellen Aufhellungen und Schattierungen zu einer Oberfläche hinzufügen möchten. Farbverläufe sind hilfreich beim Optimieren von Web-Apps, da Sie keine Bilder für diese Effekte verwenden müssen und die Bandbreite und den Zeitbedarf beim Laden minimieren können. Da sie programmgesteuert erzeugt werden, können sie leicht skaliert und wiederverwendet werden. |
|
Das Canvaselement ist ein Zeichenbereich im HTML-Dokument, in dem Sie mit JavaScript Grafiken wie Animationen, Diagramme und Spiele generieren können. In diesem Thema werden die Schritte zum Anzeigen eines Bilds mithilfe des Canvaselements beschrieben. |
Sie können CSS (Cascading Stylesheets) und SVG oder Canvas in Windows Store-Apps verwenden, um schnelle, einfache Vektorgrafiken hinzuzufügen und Ihre Benutzeroberfläche zu animieren.
Mit SVG oder Canvas kann nahezu jede Vektorgrafik gezeichnet werden. Der Arbeitsaufwand für den Entwickler oder PC kann dabei aber je nach Aufgabe erheblich größer sein.
Mit CSS3-2D-Transformationen (Cascading Stylesheets, Level 3) können Sie Objekte im 2D-Raum verschieben, drehen, skalieren und scheren. CSS3-3D-Transformationen unterstützen dieselben Transformationen im 3D-Raum und bieten zusätzlich die Möglichkeit, die Tiefenwirkung mithilfe einer Perspektiventransformation zu simulieren.
Wenn mehrere Transformationen einzeln angegeben werden, sind ihre Ergebnisse kumulativ und hängen von der Reihenfolge ab, in der sie angewendet werden.