Wie zeichnet und Grafiken mit HTML5-Canvas Animieren
Eines der spannenden neuen Teile von HTML5 ist die Segeltuch
Element. Mit Segeltuch, Sie können Bitmap-Grafiken im Browser-Fenster ziehen. Was ist noch beeindruckender und nützlich ist, dass Sie ein Programm schreiben können, die Grafiken auf dem fly im Browser-Fenster ziehen wird.Wie funktioniert Segeltuch Arbeit?
Das Segeltuch Element schafft einen Behälter oder Leinwand, auf die Sie Grafiken zeichnen. Ein einfaches Beispiel für eine Segeltuch Element, das eine 300-Pixel-Quadrat Zeichenfläche erzeugt sieht wie folgt aus:
Sobald Sie haben die Segeltuch, Sie müssen ein Skript, mit javascript, schreiben die Dinge im Zeichenbereich zu setzen. Bilder innerhalb eines gezogenen Segeltuch Element sind sehr verschieden von den statischen Bildern, die traditionell in Web-Seiten verwendet werden, in dem Sie die Grafiken auf dem Server erstellen müssen und laden, bevor der Browser sie in Web-Seiten mit den Lasten img -Tag.
Bilder mit dem geladenen img Tag kann nicht verändert werden, nachdem sie im Browser angezeigt sind. Web-Entwickler haben eine gewisse Fähigkeit die Bilder zu verschieben oder die Größe, aber wenn es ein Bild von Ihrer Katze, zum Beispiel, gibt es keine Möglichkeit, es in ein Bild von dem Fahrrad zu transformieren.
Mit Grafiken, ist die Situation ganz anders. Da das Skript die Zeichnung, nachdem die Webseite geladen tut, kann die Grafik überhaupt etwas zu sein, und es kann sehr schnell gezogen werden. Segeltuch funktioniert sehr gut für Diagramme und Grafiken zu zeichnen, aber es kann auch in Echtzeit zu manipulieren Fotografien oder sogar Animation zu erstellen oder mit Videodateien arbeiten verwendet werden.
Hier ist ein einfaches Beispiel für eine javascript-Funktion, die ein festes Rechteck zu zeichnen, wenn von innen ein HTML-Dokument verwendet:
Funktion draw () {var Leinwand = document.getElementById ( 'Leinwand') - if (canvas.getContext) {var ctx = canvas.getContext ( '2d') - ctx.fillRect (25,25,100,100) -}}
Was ist Leinwand gut?
Aufgrund seiner Fähigkeit, Grafiken zu manipulieren sehr schnell Programme, die mit Benutzereingaben gesteuert werden kann, Segeltuch Grafiken sind ideal für Spiele. Einige der beliebtesten Spiele erstellt mit Segeltuch einschließen
gewunden ist ein einfaches, aber süchtig machendes, Spiel, in dem Sie einen Zeiger steuern, die Sie rund um rote Punkte und traf gute Punkte zu vermeiden bewegen.
Leinwand-Reiter ist ein schönes Spiel 2D-Scrolling, wo Sie ein Strichmännchen auf dem Fahrrad zu steuern, über den Spuren Hunderte von Benutzern bereitgestellte Reiten.
ZTYPE ein Spiel, wo Sie Wörter, wie sie fallen, sind gegenüber den Sie eingeben müssen. Wie Sie die Buchstaben in jedem Wort eingeben, werden sie aus dem Himmel geschossen.
Segeltuch auch gut für Grafiken und Diagramme, die aktualisiert werden in Echtzeit mit Live-Daten oder zur Aktivierung Ihrer Benutzer zu manipulieren Grafiken über das Internet zu schaffen ist.
Das Potential nutzt für HTML5 Segeltuch nur durch Ihre Fantasie-und indem Sie Ihre Programmierkenntnisse, natürlich begrenzt.
Ab August 2013 wird die Segeltuch Element wird von den meisten modernen Browsern, einschließlich IE9 (und höhere Versionen), Firefox, Chrome, Opera und Safari unterstützt. Bitte beachten Sie jedoch, dass Benutzer, die ältere oder weniger gängigen Web-Browser wahrscheinlich nicht in der Lage sein zu sehen, oder die Interaktion mit Segeltuch-Grafik.