HTML5 Canvas Element Detailled Tutorial 1

<Canvas> ist ein brandneues Element in HTML5, das von JavaScript zum Zeichnen von Grafiken verwendet werden kann. Zunächst wurde <Canvas> auf das Mac OS X -Dasboard von Apple eingeführt, das auf Safari angewendet wurde und dann auf dem Gecko1.8 -Browser basiert, das auch dieses neue Element wie den Firefox -Browser unterstützt. Heute ist das <Canvas> -Element Teil der HTML5 -Standardspezifikation.

Wir werden erklären, was <Canvas> durch dieses Tutorial tun kann, und es kann als Ausgangspunkt für Ihre Anwendung <Canvas> verwendet werden. Es ist nicht schwierig, <Canvas> Elemente zu lernen. Sie müssen nur das Grundkenntnis von HTML und JavaScript sowie Firefox -Browser, Safari neueste Version oder Opera9+haben, damit Sie alle Beispieleffekte sehen können.

Beginnen wir nun mit der Definition des <Canvas> -Elements.

<Canvas ID = Tutorial Breite = 150 Höhe = 150> </canvas>

Das <Canvas> -Element hat nur zwei Attribute, Breite und Höhe, die optional sind und mit DOM oder CSS gesteuert werden können. Wenn Breite und Höhe nicht eingestellt sind, beträgt die Standardbreite 300 Pixel und 150 Pixel hoch. Obwohl die Größe von <Canvas> über CSS gesteuert und eingestellt werden kann, wird das gerenderte Bild so skaliert, dass sie sich an das Layout anpassen kann. Sobald sich die Rendering -Ergebnisse deformiert aussehen, müssen Sie sich nicht auf CSS verlassen. Sie können die in <Canvas> angezeigten Werte von Breite und Höhe angeben. Genau wie Standard -HTML -Tags können auch ID -Attribute definiert werden, die die Skriptanwendung bequemer machen können. Das Element <Canvas> kann seinen Stil (Ränder, Grenzen, Hintergründe usw.) wie ein normales Bild angeben. Diese Stile haben jedoch keinen Einfluss auf das tatsächliche Bild, das von Leinwand erzeugt wird.

Da dieses Element relativ neu ist, unterstützen nicht alle Browser es. Daher müssen wir alternative Anzeigeninformationen für diejenigen bereitstellen, die nicht normal durchsuchen können. Es kann Text oder Bilder verwenden:

 <canvasid = Stockgraphwidth = 150Height = 150>
 Ihr Browser unterstützt das <Canvas> -Element nicht.
 </canvas>
 <canvasid = clockwidth = 150Height = 150>
 <imgsrc = bilder.pngwidth = 150Height = 150alt = Bild ersetzen/
 </canvas>

In Apple Safari ist die Implementierung von <Canvas> <img> sehr ähnlich und hat kein Endetag. Damit <Canvas> in der Webwelt weit verbreitet ist, müssen alternative Inhalte mit einem Unterkunftsort versorgt werden. Daher ist es erforderlich, das Tag (</canvas>) bei der Mozilla -Implementierung zu beenden. <canvas id = foo ...> </canvas> ist vollständig kompatibel mit Safari und Mozilla - Safari ignoriert einfach das Endetikett. 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 einen Zeichnungsbildschirm mit fester Größe mit einem oder mehreren Rendering-Kontexten, die steuern können, was angezeigt werden soll. Wir konzentrieren uns auf das 2D -Rendering, was derzeit auch die einzige Option ist. Wir können das 3D -Rendering in Zukunft auf der Grundlage von OpenGLE hinzufügen.

 varcanvas = document.getElementById ('Tutorial');
 varctx = canvas.getContext ('2d');

Erklären wir den obigen Code. Die Initialisierung von <Canvas> ist leer. Um ein Skript zu zeichnen, müssen Sie den Kontext zuerst rendern. Es kann über die GetContext -Methode des Canvas -Elementobjekts erhalten werden. Gleichzeitig werden einige Funktionen, die zum Zeichnen gefordert werden müssen, ebenfalls erhalten. getContext () akzeptiert einen Wert, der seinen Typ als Argument beschreibt. Die erste Zeile oben erhält den DOM -Knoten des Canvas -Objekts über die GetElementById -Methode. Verwenden Sie dann die GetContext -Methode, um den Kontext des Zeichnungsbetriebs zu erhalten. Darüber hinaus können wir auch Skripte verwenden, um die Unterstützung des Browsers für <Canvas> zu bestimmen, dh zu bestimmen, ob der GetContext existiert.

 varcanvas = document.getElementById ('Tutorial');
 if (canvas.getContext) {
 varctx = canvas.getContext ('2d');
 // DrawingCodhere
 }anders{
 // Canvas-nichtsupporteedCodhere
 }

Wir beginnen mit der einfachsten Vorlage unten und können sie in Ihr lokales Backup kopieren.

 <html>
 <kopf>
 <title> canvastutorial </title>
 <scriptType = text/javaScript>
 functionDraw () {
 varcanvas = document.getElementById ('Tutorial');
 if (canvas.getContext) {
 varctx = canvas.getContext ('2d');
 }
 }
 </script>
 <styLetype = text/css>
 Canvas {Grenze: 1pxsolidblack;}
 </style>
 </head>
 <bodyonload = draw ();>
 <canvasid = tutorialWidth = 150Height = 150> </canvas>
 </body>
 </html>

Sorgfältig finden Sie eine Funktion namens Draw, die einmal nach dem Laden der Seite ausgeführt wird (indem Sie die Onload -Eigenschaft des Body -Tags festlegen), und natürlich kann sie auch in SetTimeOut-, SetInterval- oder anderen Ereignisverarbeitungsfunktionen aufgerufen werden.

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>
 <scriptType = application/x-JavaScript>
 functionDraw () {
 varcanvas = document.getElementById (Canvas);
 if (canvas.getContext) {
 varctx = 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>
 <bodyonload = draw ();>
 <canvasid = canvaswidth = 150Height = 150> </canvas>
 </body>
 </html>

Sie können den obigen Code in die HTML -Datei kopieren, um sie auszuführen, Renderings: