Der Tag <canvas> HTML5

Der neue Tag ist ein Tag <canvas> HTML5 ist nicht in früheren Versionen, die für die Erstellung und die Arbeit mit Grafiken vorhanden sein können.

Der Tag <canvas> braucht eine Unterstützung von Skriptsprachen wie JavaScript um einwandfrei funktionieren und führen Sie voll sein Potenzial.

Der Zweck dieses Artikels ist es, die grundlegende Verwendung des neuen Tags veranschaulichen, aber einige Punkte durch den ständigen Gebrauch von praktischen Beispielen fortgeschritten, so hoffe ich, wird das Lernen erleichtern.

Prämisse

Als absolutes Novum in der besten Leinwand wird nicht von allen Browsern unterstützt wird, so ist es möglich, dass die Demonstration Beispiele in diesem Artikel nicht korrekt angezeigt werden.
Der Test wurde mit Google Chrome, auf denen Sie keine Probleme erlebt haben, durchgeführt.

Verwenden Sie den Tag <canvas>

Die gemeinsame Nutzung des Canvas-Tag ist ziemlich einfach und nicht von anderen HTML-Tags.
Formal Canvas ist ein einfacher Container, und als solche hat ein Start-Tag (<canvas>) und Schließen (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Element wird nicht unterstützt







 </ Canvas>

Wenn die Dimensionen nicht explizit angegeben (mit den Attributen Breite und Höhe) der Größe zugeordneten Behälter ist der Standard, eine grundlegende Rechteck mit der Höhe 300 und 150.
Das id-Attribut, ist natürlich nicht notwendig, aber, meiner Meinung nach, ist es immer eine gute Idee zu nennen, um eine einzigartige Referenz für jedes Objekt, das auf der Seite verwendet haben.

Der Textteil abgegrenzt durch <canvas> und </ canvas>, um die Notiz dar zeigt an, wenn die Grafik nicht von Ihrem Browser nicht unterstützt.

Bevor mit der Umsetzung Details Test das Potenzial der Leinwand mit einem einfachen Code zu testen, zu leben:

 <canvas id="bandierina" width="180" height = "100"> nicht unterstützt </ Canvas>







 <script type="text/javascript">







 var canvas = document.getElementById ('flag');







 var c = canvas.getContext ('2 d ');







 c.fillStyle = '# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle = "# FFFFFF";







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00';







 c.fillRect (0,0,60,100);







 </ Script>

Auf dieser Seite sehen Sie das Ergebnis dieser Code (die Ausgabe richtig zu sehen, müssen Sie erneut einen Browser, der HTML 5 unterstützt).

Wie bereits am Anfang des Artikels in diesem Abschnitt der Code bekannt ist explizit die Tatsache, dass die Leinwand Arbeit ein Skript verwenden. Aus diesem Beispiel können wir sofort beachten Sie die Standard-Technik, um das Objekt Leinwand Hintergrund Variablen extrahieren:

 / / Erstellen der Leinwand Element durch ID







 var canvas = document.getElementById ('flag');









 / / Erstellen einer neuen zweidimensionalen Objekt auf der Leinwand







 var c = canvas.getContext ('2 d ');

Javascript getElementById Methode speichert das Objekt in eine variable Leinwand, über den Wert seines id-Feld; getContext ('2 d ') nimmt im Rahmen oder ein Objekt, das dem Programmierer bietet eine Reihe von Methoden, um mit der Leinwand als Arbeit gewünschte (in unserem Fall, dass Sie mit der zweidimensionalen Grafik-Funktionen, also 2D-Arbeit).

Auf den folgenden Seiten werden wir einige grundlegende Operationen sinnvoll, die Programmierer beabsichtigt, von der Leinwand zu machen.

• <<
• 1
• 2
• 3
• 4
• 5
• >>