Verwenden von Grafik mit Canvas, SVG und CSS3 (HTML)

Applies to Windows and Windows Phone

In diesem Abschnitt erfahren Sie mehr zur Verwendung von Grafiken in Windows Store-Apps mit JavaScript.

Inhalt dieses Abschnitts

ThemaBeschreibung

Schnellstart: Zeichnen auf eine Canvas

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.

So wird's gemacht: Animieren von Canvas-Grafiken

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.

So wird's gemacht: Erstellen eines Verlaufs

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.

So wird's gemacht: Anzeigen eines Bildes

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.

 

 

Anzeigen:
© 2014 Microsoft