[HTML5] Was sind Canvas?

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: HTML5
Erstellt am 29.01.2013 Zuletzt aktualisiert am 03.05.2013 Geschrieben von Jonny132
Canvas ist ein neues HTML5 - Element und wird Grundlegend dazu genutzt um Inhalte zur Laufzeit zu Zeichnen.
Dies geschieht normalerweise mittels JavaScript, denn das Canvas - Element ist nur ein Containerobjekt für Grafiken.
Um dann wirklich Texte, Bilder, Kreise oder sonstige Formen in das Canvas - Element zu Zeichnen, wird eine Scriptsprache benötigt.

Ein Canvas erstellen:
<canvas id="meinCanvas" width="300px" height="300px"></canvas> 
Mit diesem Code, wird ein Canvas mit der Größe von 300x300 Pixel erstellt. Dazu werden die width und height - Eigenschaften verwendet.
Beachtet, dass ihr eurem Canvas immer eine ID mitgeben solltet, damit ihr das Canvas später im Code über diese ID ansprechen könnt.
Standartmäßig besitzten Canvas - Elemente keine Formatierung. Diese kann ganz normal mittels CSS bzw. der Style-Eigenschaft vorgenommen werden.

Ein formatiertes Canvas:
<canvas id="meinCanvas" width="300" height="300"
 style="border:1px solid black;">
</canvas>

Da HTML5 und somit auch das Canvas-Tag erst von den neueren Browserversionen unterstützt wird, ist es manchmal Nützlich den User darauf aufmerksam zu machen.
Dies geschiet einfach in dem man die Nachricht die man dem User mitteilen will, in den Canvas-Tag schreibt.

Ein Canvas mit Nachricht an ältere Browserversionen:
<canvas id="meinCanvas" width="300" height="300">
Ihre Browserversion unterstützt derzeit noch kein HTML5-Canvas Tag.
Laden Sie die neueste Version ihres Browsers herunter um die Homepage korrekt anzeigen zu lassen.
</canvas>
  
In den folgenden Tutorials wird nun Erklärt wie ihr auf diesem Canvas-Element

    Veröffentlichen Sie ihre Kommentare ...