Zeichnen Sie ein Basic-Rechteck mit dem HTML5-Canvas-Tag

So verwenden Sie die Segeltuch Tag in HTML5, bauen eine Web-Seite mit einem Segeltuch Element darin. Typischerweise Sie bieten Breite, Höhe, und Ich würde Parameter, um anzuzeigen, wie groß die cnavas ist, etwa so:

Ihr Browser unterstützt nicht die Leinwand-Tag ...

Im Inneren der Segeltuch Tag können Sie einen beliebigen HTML-Code setzen Sie wollen. Dieser Code wird angezeigt, wenn der Browser das nicht unterstützt Segeltuch -Tag. Normalerweise nur, Sie irgendeine Art von Nachricht setzen den Benutzer wissen zu lassen, was sie verpasst.

Nichts Interessantes passiert in einer Leinwand ohne irgendeine Art von javascript-Code. Oft finden Sie eine Funktion verwenden, um auf dem Bildschirm zu zeichnen. Hier ist ein zeichnen() Funktion, die durch die aufgerufen body onload Event:

 Funktion draw () {var Leinwand = document.getElementById ( "Zeichnung") - if (canvas.getContext) {var con = canvas.getContext ( '2d') - con.fillStyle = "# FF0000" -con.fillRect (10 , 10, 50, 50) -} // end if} // end Unentschieden

Das zeichnen() Funktion zeigt alle wichtigen Ideen mit der Leinwand-Tag arbeiten. Hier ist, wie Sie eine einfache Zeichnung bauen:

1. Erstellen Sie eine Variable Bezug auf die Leinwand.

   Verwenden Sie die Standard getElementById () Mechanismus eine Variable zu erstellen, um die Leinwand verweisen.

2. Extrahieren Sie die Grafikkontext von der Leinwand.

   Canvas-Elemente haben eine Grafikkontext, Das ist ein spezielles Objekt, das alle Zeichnung kapselt Methoden der Leinwand durchführen können. Die meisten Browser unterstützen nun einen 2D-Kontext, sondern 3D-Kontexte sind geplant.

3. Legen Sie den Kontext des fillStyle, die angibt, wie Sie Bereiche Farbe in ausgefüllt (wie Rechtecke).

   Der grundlegende Ansatz ist es, einen CSS-Stil Farbwert zu liefern.

4. Erstellen Sie ein ausgefülltes Rechteck.

   Die rechteckige Form ist recht einfach zu bauen. Er erwartet, dass vier Parameter: x, y, Breite, und Höhe. Das x und y Parameter geben die Position der oberen linken Ecke des Rechtecks, und die Breite und Höhe Parameter geben die Größe des Rechtecks. Alle Messungen sind in Pixeln.