Kommentar: Jeder weiß, dass nicht alle Browser HTML5 unterstützen. Selbst Browser, die HTML5 unterstützen, unterstützen möglicherweise nicht alle neuen Funktionen von HTML5. Es wird empfohlen, dass Sie Firefox (Favoriten der Entwickler) oder Chrome -Browser verwenden. Alle meine Beispiele basieren auf Firefox.
Ab heute werden wir eine Reihe von Kursen auf HTML5 -Leinwand beginnen. Diese Serie ist meine Zusammenfassung nach dem Lesen "HTML5 Canvas: Native Interaktivität und Animation für das Web". Interessierte Freunde können ursprüngliche englische Bücher zum Lesen herunterladen. Dieses Buch zeigt uns die leistungsstarken Funktionen von Leinwand durch Einführung der Entwicklung von Leinwand. Ich finde es ziemlich gut. Ich habe viel Wissen über Leinwand gelernt, indem ich dieses Buch gelesen habe. Tatsächlich gibt es in Leinwand selbst nicht viele APIs. Der Schlüssel ist, sie aktiv zu lernen und zu verwenden und zu lernen, unglaubliche Ergebnisse für die Kombination von APIs zu erzielen. Und dieses Buch ist Ihre beste Wahl, um Leinwand zu lernen. Schade, dass es noch keine chinesische Version gibt. Freunde mit schlechtem Englisch können nur warten.Wie wir alle wissen, unterstützen nicht alle Browser HTML5, und selbst Browser, die HTML5 unterstützen, unterstützen möglicherweise nicht unbedingt alle neuen Funktionen von HTML5. So sollte jeder einen relativ neuen Browser als Debugging -Umgebung wählen. Es wird empfohlen, dass Sie Firefox (Favoriten des Entwicklers) oder Chrome -Browser verwenden. Alle meine Beispiele basieren auf Firefox.
Ich werde hier nicht das Grundwissen in Bezug auf HTML5 vorstellen. Es gibt viele Tutorials über HTML5 im Internet, sodass ich es selbst lernen kann. Um HTML5 zu lernen, müssen Sie eine bessere Grundlage für JavaScript haben. Sie können zu Onkel Toms Blog gehen, um zu lernen:. Tatsächlich ist diese Reihe von Kursen ziemlich schwierig. Wenn Sie mehr als 50 Artikel gut studieren, sollten Sie als JS -Experte angesehen werden.
Jetzt beginnen wir offiziell unseren Canvas -Kurs, das erste Beispiel: Hallo Canvas.
Zunächst müssen Sie das Canvas -Tag in den Körper hinzufügen, wie folgt:
<Canvas>
Ihr Browser unterstützt keine HTML5 -Leinwand.
</canvas>
Der Textteil in Leinwand wird angezeigt, wenn der Browser das Canvas -Objekt nicht unterstützt.
Das Leinwand -Tag ist definiert. Wenn wir es über JS bedienen müssen, kann es durch GetElementById implementiert werden.
var thecanvas = document.getElementById (canvason); Wir sind jetzt daran gewöhnt, JQuery zur Entwicklung von Aufgaben zu verwenden. Wie bekomme ich also das Canvas -Objekt mit JQuery?
var canvas = $ ('#canvasone'). Get (0); oder var canvas = $ ('#canvasone') [0]; Ich weiß nicht, dass (0) und [0] es nicht haben. Wenn Sie nicht die Get () -Methode oder das [] -Methode verwenden, kann Ihr JS -Code keine Leinwand normalerweise betreiben. Weil $ ('#canvasone') ein JQuery -Objekt erhält, und was wir tatsächlich bedienen möchten, ist ein HTML -DOM -Objekt. Es gibt ein Problem, bei dem JQuery -Objekt in DOM -Objekt umgewandelt wird und diese Konvertierung durch Get () oder ein Index abgeschlossen wird. Wenn Sie ein DOM -Objekt in ein JQuery -Objekt umwandeln müssen, können Sie die $ () -Methode verwenden, um es zu implementieren. Mein Freund, der nicht klar ist, hat den einzigen, der alleine nach Baidu geht, also werde ich hier nicht ausführlich darauf eingehen.
Um die Robustheit des Codes zu gewährleisten, müssen wir feststellen, ob Ihr Browser Canvas -Objekte unterstützt, die über den folgenden Code implementiert werden können.
if (! thecanvas ||! thecanvas.getContext) {
zurückkehren;
}
Es wird jedoch empfohlen, die Modernizr.js -Bibliothek zu verwenden, um diese Arbeit zu erledigen. Dies ist eine sehr passive HTML5 -JS -Bibliothek und bietet viele nützliche Methoden.
Funktion canvassupport () {
Return Modernizr.canvas;
}
Canvas unterstützt das 2D -Rendering und wird über den folgenden Code implementiert:
var context = thecanvas.getContext (2d);
Als nächstes können wir das Bild auf Leinwand durch das Kontextobjekt zeichnen.
// Setzen Sie die Flächenfarbe
context.fillStyle = "#ffffa";
// den Bereich zeichne
Context.FillRect (0, 0, 500, 300);
// Schriftstelle setzen
context.font = "20px _sans";
// vertikale Ausrichtung setzen
context.textbaseline = "top";
// Text zeichnen
Context.FillText ("Hello World!", 195, 80);
// Randfarbe festlegen
context.strokestyle = "#000000";
// Grenze zeichnen
Kontext.Strokerect (5, 5, 490, 290);
Die Zeichnung des Bildes wird unten beschrieben. Aufgrund des asynchronen Downloads des Bildes, um sicherzustellen, dass das Bild beim Zeichnen eines Bildes mit Leinwand heruntergeladen wurde, verwenden wir die folgende Methode:
var helloWorldimage = new Image ();
helloWorldimage.src = "helloWorld.gif";
helloWorldimage.onload = function () {
context.drawimage (helloWorldimage, 160, 130);
}
Wenn das Bild fertig ist, wird das Onload -Ereignis ausgelöst und das Bild wird mit dem Kontextobjekt gezeichnet.
Jeder laden die Demo herunter, um den vollständigen Code zu sehen. Die Demo -Download -Adresse: html5canvas.helloworld.zip