Kommentar: Was Canvas <Canvas> ist, ist ein neues HTML -Element, das in HTML5 definiert ist. Dieses Element kann normalerweise zum Zeichnen von Grafiken, zum Synthese von Bildern usw. auf HTML -Seiten über JavaScript verwendet werden und kann auch zur Erstellung einiger Animationen verwendet werden. Natürlich derzeit HTML5
Was ist Leinwand
<Canvas> ist ein neues HTML -Element, das in HTML5 definiert ist. Dieses Element kann normalerweise zum Zeichnen von Grafiken, zum Synthese von Bildern usw. auf HTML -Seiten über JavaScript verwendet werden und kann auch zur Erstellung einiger Animationen verwendet werden. Natürlich befindet sich die HTML5 -Spezifikation noch in der Entwurfsstufe, und es kann bis 2010 dauern, bis sie offiziell veröffentlicht werden, aber jetzt haben viele Browser bereits einige HTML5 -Spezifikationen unterstützt. Derzeit umfassen Browser, die Leinwandelemente unterstützen, Firefox3+, Safari4, Chrome 2.0+ usw.
Obwohl ich in Mozilla viele Tutorials auf Leinwand hatte, habe ich mich entschlossen, meinen Lernprozess aufzuzeichnen. Wenn Sie der Meinung sind, dass ich nicht genug verstehe, finden Sie einen Link zum Canvas -Tutorial auf der Mozilla -Website in den Referenzmaterialien.
Auch einige interessante Beispiele für Leinwand finden Sie hier.
Beginnen Sie mit Leinwand
Die Verwendung von Leinwand ist einfach. Genau wie die Verwendung anderer HTML -Elemente müssen Sie der Seite nur ein <Canvas> -Tag hinzufügen:
<Canvas> </canvas>
Dies ist natürlich nur eine einfache Schaffung eines Leinwandobjekts und führt keine Operation darauf aus. Zu diesem Zeitpunkt sieht das Canvas -Element nicht anders aus als das DIV -Element, und auf der Seite kann nichts zu sehen sein :)
Darüber hinaus kann die Größe des Canvas -Elements durch die Breite und die Höhenattribute angegeben werden, die dem IMG -Element etwas ähnlich sind.
Canvas 'Kern: Kontext
Wie bereits erwähnt, können Sie Canvas -Objekte über JavaScript bedienen, um Grafiken, Synthesebilder usw. zu zeichnen. Diese Operationen werden nicht über das Canvas -Objekt selbst durchgeführt, sondern über eine Methode des Canvas -Objekts, um den GetContext zu erhalten, um den Kontext des Canvas -Betriebs zu erhalten. Mit anderen Worten, im Prozess der Verwendung des Canvas -Objekts befassen wir uns mit dem Kontext des Canvas -Objekts, und das Canvas -Objekt selbst kann verwendet werden, um Informationen wie die Größe des Canvas -Objekts zu erhalten.
Es ist sehr einfach, den Kontext des Canvas -Objekts zu erhalten. Rufen Sie einfach die GetContext -Methode des Canvas -Elements auf. Beim Aufrufen müssen Sie einen Parameter des Kontextyps übergeben. Der einzige Typwert, der verwendet und verwendet werden kann, ist 2D:
Firefox3.0.xs Verlegenheit
Obwohl Firefox3.0.x Canvas -Elemente unterstützt, ist es nicht vollständig gemäß der Spezifikation implementiert. Die fillText- und mesuretext-Methoden in der Spezifikation werden durch mehrere Firefox-spezifische Methoden in Firefox3.0.x ersetzt. Bei Verwendung von Canvas in Firefox3.0.x müssen Sie daher zunächst die Unterschiede zwischen diesen Methoden in verschiedenen Browsern festlegen.
Der folgende Code stammt aus dem Mozillabspin -Projekt, das die Inkonsistenz zwischen dem Kontextobjekt von Canvas in Firefox3.0.x und der HTML5 -Spezifikation korrigiert:
Hinweis: Bis Opera 9.5 unterstützt die Opera nicht den Fülle des Canvas -Objekts und seiner zugehörigen Methoden und Eigenschaften in der HTML5 -Spezifikation.
Hallo, Canvas!
Nach einigen vorläufigen Verständnis von Leinwand begannen wir unser erstes Canvas -Programm zu schreiben, ein weiterer Zweig der berühmten HelloWorld Hello, Canvas:
Führen Sie das Beispiel aus, das Gebiet, in dem sich das Canvas -Objekt befindet, zeigt Hallo, Welt! im Code.
fülle text und verwandte Eigenschaften
Mit der fillText -Methode werden Text in Canvas angezeigt. Es kann vier Parameter akzeptieren, das letzte ist optional:
voidfillText (IndomstringText, Floatx, Beschließung, [optional] bloßmaxwidth);
Wobei Maxwidth die maximale Breite beim Anzeigen von Text darstellt, der verhindern kann, dass Text überfließt. In meinen Tests stellte ich jedoch fest, dass Maxwidth bei der Angabe von Maxwidth in Firefox und Chomre nicht wirksam ist.
Bevor Sie die füllerische Methode verwenden, können Sie die Schriftart des Textes anpassen, indem Sie die Schrifteigenschaft des Kontextes festlegen. Im obigen Beispiel habe ich 20ptarial als Schriftart des Textes verwendet. Sie können verschiedene Werte selbst festlegen, um den spezifischen Effekt zu erkennen.
Beenden
Das ist alles vorerst. Ich werde diese Serie schreiben, während ich die Spezifikationen lese :)
Referenzen
1. HTML5 -Leinwand, eine neue Bühne für die Skriptsprache, HRED
2.
3..
4. Canvastutorial Englisch, Mozilla
5. Canvassupportinopera, Oper