<Canvas> ist ein neues HTML -Element, das von der Skriptsprache (normalerweise JavaScript) zum Zeichnen von Grafiken verwendet werden kann. Zum Beispiel kann es verwendet werden, um Bilder zu zeichnen, Bilder zu synthetisieren oder einfache (und nicht so einfache) Animationen durchzuführen. Das Bild rechts zeigt einige Anwendungsbeispiele von <Canvas>, und wir werden ihre Implementierung in diesem Tutorial sehen.
<Canvas> wurde zuerst auf das Mac OS X Dashboard von Apple von Apple eingeführt und dann auf Safari angewendet. Browser basierend auf Gecko1.8, wie Firefox 1.5, unterstützen auch dieses neue Element. Das Element <Canvas> ist Teil von WhatWg Web Applications 1.0, das allen bekannt ist, die HTML 5 -Standardspezifikation.
In diesem Tutorial werde ich versuchen, Ihnen zu sagen, wie Sie das Element <Canvas> auf Ihrer eigenen Webseite verwenden. Die angegebenen Beispiele sollten Ihnen einige klare Konzepte geben, nämlich das, was Sie mit <Canvas> tun können. Diese Beispiele können auch als Ausgangspunkt für Ihre Anwendung <Canvas> dienen.
Bevor Sie anfangen zu benutzen
Die Verwendung des Elements <Canvas> ist nicht schwierig, solange Sie über das Grundkenntnis von HTML und JavaScript verfügen.
Wie oben erwähnt, unterstützen nicht alle modernen Browser <Canvas> Elemente, sodass Sie Firefox 1.5 oder höher oder andere auf Gecko-basierte Browser wie Opera 9 oder eine aktuelle Version von Safari ansehen, um alle Aktionen von allen Beispielen zu sehen.
<Canvas> Element
Beginnen wir dieses Tutorial, indem wir uns das Element <canvas> selbst ansehen.
Beginnen wir mit der Definition des <Canvas> -Elements.
<Canvas ID = Tutorial Breite = 150 Höhe = 150> </canvas>
Das sieht dem <Mg> -Element sehr ähnlich. Der einzige Unterschied besteht darin, dass es nicht die SRC- und Alt -Attribute gibt. <Canvas> sieht dem <img> sehr ähnlich aus, der einzige Unterschied besteht darin, dass es nicht die SRC- und ALT -Attribute gibt. Das <Canvas> -Element hat nur zwei Attribute - Breite und Höhe . Diese sind beide optional und können auch mit DOM -Eigenschaften oder CSS -Regeln festgelegt werden. Wenn keine Breite und Höhenattribute angegeben werden, sind die Leinwand zunächst 300 Pixel breit und 150 Pixel hoch . Das Element kann von CSS willkürlich dimensioniert werden, aber während des Renders wird das Bild so skaliert, dass er seine Layoutgröße entspricht. (Wenn Ihre Renderings verzerrt erscheinen, geben Sie Ihre Breite und Höhenattribute in den <Canvas> -attributen und nicht mit CSS an.) Obwohl die Größe der Leinwand durch CSS geändert werden kann, wird das Rendernbild skaliert, um sich an das Layout anzupassen (Wenn Sie die rendenden Ergebnisse aussehen. Leinwand).
Das ID -Attribut ist nicht spezifisch für das Element <Canvas>, sondern eines der Standard -HTML -Attribute, die auf (fast) jedes HTML -Element angewendet werden können (wie zum Beispiel der Klasse). Es ist immer eine gute Idee, eine ID zu liefern, da dies es viel einfacher macht, sie in unserem Skript zu identifizieren.
Das ID -Attribut ist nicht exklusiv für <Canvas>. Genau wie das Standard -HTML -Tag kann jedes HTML -Element seinen ID -Wert angeben. Im Allgemeinen ist es eine gute Idee, eine ID für ein Element anzugeben, die es einfacher erleichtert, in Skripten anzuwenden.
Das <Canvas> -Element kann wie jedes normale Bild (Rand, Rand, Hintergrund usw.) gestylt werden. Diese Regeln wirken sich jedoch nicht auf die tatsächliche Zeichnung der Leinwand aus. Wir werden sehen, wie dies später in diesem Tutorial gemacht wird. Wenn keine Styling -Regeln für die Leinwand angewendet werden, ist es zunächst vollständig transparent. Das <Canvas> -Element kann wie jedes normale Bild (Rand, Rand, Hintergrund usw.) gestylt werden. Diese Regeln wirken sich jedoch nicht auf die tatsächliche Zeichnung der Leinwand aus. Wir werden sehen, wie dies später in diesem Tutorial gemacht wird. Wenn keine Styling -Regeln für die Leinwand angewendet werden, ist es zunächst vollständig transparent. Das <Canvas> -Element kann wie jedes normale Bild (Rand, Rand, Hintergrund usw.) so gestaltet werden, als wäre es ein normales Bild. Diese Stile haben jedoch keinen Einfluss auf das tatsächliche Bild, das von Leinwand erzeugt wird. Im Folgenden werden wir sehen, wie man Stile anwendet. Wenn Sie keinen Stil angeben, ist Leinwand standardmäßig vollständig transparent.
Da das Element <Canvas> noch relativ neu ist und in einigen Browsern (wie Firefox 1.0 und Internet Explorer) nicht implementiert ist, benötigen wir ein Mittel, um Fallback -Inhalte bereitzustellen, wenn ein Browser das Element nicht unterstützt.
Da <Canvas> relativ neu ist, müssen einige Browser es nicht implementieren, wie z.
Zum Glück ist dies sehr einfach: Wir bieten nur alternative Inhalte innerhalb des Canvas -Elements. Browser, die es nicht unterstützen, ignorieren das Element vollständig und machen den Fallback -Inhalt, andere werden die Leinwand normalerweise normalerweise rendern.
Zum Beispiel könnten wir eine Textbeschreibung des Canvas -Inhalts bereitstellen oder ein statisches Bild des dynamisch gerenderten Inhalts bereitstellen. Dies kann ungefähr so aussehen:
Wir müssen nur Ersatzinhalte direkt in das Canvas -Element einfügen. Browser, die keine Leinwand unterstützen, ignorieren die Canvas -Elemente und rendern den alternativen Inhalt direkt, während unterstützte Browser Leinwand normalerweise rendern. Zum Beispiel können wir einige Text oder Bilder als alternativen Inhalt in Leinwand ausfüllen:
<Canvas ID = Stockgraph Breite = 150 Höhe = 150> Aktienkurs des aktuellen Aktiens: $ 3,15 +0,15 </Canvas> <Canvas ID = Taktbreite = 150 Höhe = 150> <img Src = Bilder/Takt.png Breite = 150 Höhe = 150/> </canvas>
In der Apple Safari -Implementierung ist <Canvas> ein Element, das auf die gleiche Weise implementiert ist, ist <img>; Es hat kein Endetikett. Damit <Canvas> im Internet weit verbreitet ist, müssen jedoch einige Einrichtungen für Fallback -Inhalte bereitgestellt werden. Daher erfordert die Implementierung von Mozilla ein End -Tag (</canvas>).
In Apple Safari ist die Implementierung von <Canvas> <img> sehr ähnlich und hat kein Endetikett. Damit <Canvas> in der Webwelt weit verbreitet ist, ist es jedoch erforderlich, einen Platz für alternative Inhalte bereitzustellen. Die Beendigung des Tags (</canvas>) bei der Implementierung von Mozilla ist daher erforderlich.
Wenn kein Fallback -Inhalt erforderlich ist, ist eine einfache <canvas id = foo ...> </canvas> vollständig mit Safari und Mozilla kompatibel - Safari ignoriert einfach das Endetikett.
Wenn es keinen Ersatz gibt, ist <Canvas id = foo ...> </canvas> vollständig kompatibel mit Safari und Mozilla - Safari ignoriert das Endetikett einfach.
Wenn Fallback -Inhalte gewünscht werden, müssen einige CSS -Tricks eingesetzt werden, um den Fallback -Inhalt von Safari zu maskieren (was nur die Leinwand rendern sollte) und auch um die CSS -Tricks aus dem IE zu maskieren (was den Fallback -Inhalt rendern sollte).
Wenn es alternative Inhalte gibt, können Sie einige CSS -Tricks verwenden, um alternative Inhalte für und nur für Safari auszublenden, da diese alternativen Inhalte in IE, aber nicht in Safari angezeigt werden müssen.
<Canvas> erstellt eine feste Zeichnungsoberfläche mit fester Größen, die einen oder mehrere Rendering -Kontexte enthüllt, mit denen der gezeigte Inhalt erstellt und manipuliert wird. Wir werden uns auf den 2D -Rendering -Kontext konzentrieren, der den einzigen derzeit definierten Rendering -Kontext ist. In Zukunft können andere Kontexte verschiedene Arten von Rendering bieten. Beispielsweise ist es wahrscheinlich, dass ein 3D -Kontext, der auf OpenGL ES basiert, hinzugefügt wird.
Der von <Canvas> erstellte Zeichnungsbildschirm mit fester Größe öffnet einen oder mehrere Rendering- Kontexte, über die wir steuern können, was angezeigt werden soll. Wir konzentrieren uns auf das 2D -Rendering, das derzeit auch die einzige Option ist, und können in Zukunft einen 3D -Kontext hinzufügen.
Das <Canvas> ist anfangs leer und zeigt etwas, das ein Skript zuerst auf den Rendering -Kontext zugreifen und darauf stützen muss. Das Canvas -Element verfügt über eine DOM -Methode namens GetContext, mit der der Rendering -Kontext und seine Zeichenfunktionen erhalten werden. getContext () nimmt einen Parameter, den Kontexttyp.
Die Initialisierung von <Canvas> ist leer. Um ein Skript darauf zu zeichnen, erfordert es zunächst seinen Rendering -Kontext. Es kann über die GetContext -Methode des Canvas -Elementobjekts erhalten werden. Gleichzeitig werden einige Funktionen zum Zeichnen erhalten. getContext () akzeptiert einen Wert, der seinen Typ als Argument beschreibt.
var canvas = document.getElementById ('Tutorial'); var ctx = canvas.getContext ('2d');In der ersten Zeile holen wir den Canvas -DOM -Knoten mit der GetlementByID -Methode ab. Wir können dann mit der GetContext -Methode auf den Zeichnungskontext zugreifen.
Die erste Zeile oben erhält den DOM -Knoten des Canvas -Objekts über die GetElementById -Methode. Anschließend wird der Zeichnungsbetriebskontext über seine GetContext -Methode erhalten.
Der Fallback -Inhalt wird in Browsern angezeigt, die <Canvas> nicht unterstützen; Skripte können beim Ausführen auch nach Unterstützung suchen. Dies kann leicht durch Testen auf die GetContext -Methode erfolgen. Unser Code -Snippet von oben wird so etwas wie folgt:
Neben dem Anzeigen alternativer Inhalte auf nicht unterstützten Browsern können Sie auch überprüfen, ob der Browser Leinwand durch Skripte unterstützt. Die Methode ist sehr einfach, beurteilen Sie nur, ob der GetContext existiert.
var canvas = document.getElementById ('Tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); // Code hier zeichnen} else {// canvas-inSupported Code hier}}Hier ist eine minimalistische Vorlage, die wir für spätere Beispiele als Ausgangspunkt verwenden werden. Sie können diese Datei herunterladen, um mit Ihrem System zu arbeiten.
Wir beginnen mit der folgenden einfachsten Codevorlage (für nachfolgende Beispiele erforderlich) und Sie können die Datei herunterladen, die lokal verwendet werden soll.
<html> <kopf> <titels> Canvas -Tutorial </title> <script type = text/javaScript> Funktion Draw () {var canvas = document.getElementById ('Tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); }} </script> <style type = text/css> canvas {border: 1px solid schwarz; } </style> </head> <body Onload = Draw ();> <Canvas ID = Tutorial Breite = 150 Höhe = 150> </canvas> </body> </html>Wenn Sie sich das Skript ansehen, werden Sie sehen, dass ich eine Funktion namens Draw erstellt habe, die nach Abschluss der Seite geladen wird (über das Onload -Attribut auf dem Body -Tag). Diese Funktion könnte auch von SetTimeout, SetInterval oder einer anderen Ereignishandlerfunktion aufgerufen worden sein, so lange die Seite zuerst geladen wurde.
Wenn Sie vorsichtig sind, werden Sie feststellen, dass ich eine Funktion namens Draw erstellt habe, die einmal nach dem Laden der Seite ausgeführt wird (indem Sie die Onload -Eigenschaft des Body -Tags festlegen), und natürlich kann es auch in SetTimeout-, SetInterval- oder anderen Ereignisverarbeitungsfunktionen aufgerufen werden.
Zu Beginn finden Sie hier ein einfaches Beispiel, das zwei sich kreuzende Rechtecke zeichnet, von denen eine Alpha -Transparenz hat. Wir werden untersuchen, wie dies in späteren Beispielen genauer funktioniert.
Lassen Sie uns zunächst einen einfachen Blick darauf werfen - zeichnen Sie zwei verkürzte Rechtecke, von denen einer einen Alpha -transparenten Effekt hat. Wir geben Ihnen einen detaillierten Blick darauf, wie es im folgenden Beispiel funktioniert.
<html> <kopf> <skript type = application/x-JavaScript> Funktion Draw () {var canvas = document.getElementById (Canvas); if (canvas.getContext) {var ctx = canvas.getContext (2d); Ctx.FillStyle = RGB (200,0,0); Ctx.FillRect (10, 10, 55, 50); Ctx.FillStyle = RGBA (0, 0, 200, 0,5); Ctx.FillRect (30, 30, 55, 50); }} </script> </head> <body onload = draw ();> <canvas id = canvas width = 150 hohe = 150> </canvas> </body> </html>