HTML5-Handbuch - die neuen Features von HTML5

nicht der gesamte Funktionsumfang des CanvasRenderingContext2D-Objekts berücksichtigt. In der HTML-Canvas-Referenz werden alle Eigenschaften und Methoden des CanvasRenderingContext2D-Objekts aufgelistet.
Andere Einführungen und Beispiele im Web:
    http://diveintohtml5.org/canvas.html
Canvas mit 2D-Rendering-Context
    Sie können einen Canvas-Bereich für eine Vektorgrafik definieren. In einem Script-Bereich stellen Sie dann einen Bezug zu dem
canvas
-Element her, indem Sie ein CanvasRenderingContext2D-Objekt erzeugen. Wurde das Objekt erfolgreich erzeugt, können Sie Methoden (Funktionen) dieses Objekts aufrufen, um vektorgrafische Inhalte zu erzeugen.
Beispiel
    
    
    
    
    
    
    
    
    
    
    
    
    
Erläuterung
    Das Beispiel erzeugt zum besseren Vergleich die gleiche Grafik wie die Beispiele in 7.2.2 SVG-Grafiken (direkt eingebettet). In diesem Fall wird jedoch anstelle von SVG das
canvas
-Element verwendet. Das
canvas
-Element wird an der Stelle im HTML-Code notiert, an der die Grafik erscheinen soll.
    Bild 7.8: Gleiche Grafik wie Bild 7.3, hier mit CanvasRenderingContext2D-Objekt
    Das Element erhält im einleitenden

-Tag die Attribute
id
,
width
und
height
. Mit
id
vergeben Sie einen dokumentweit eindeutigen Namen für das Element. Über diesen Namen können Sie in JavaScript auf das Element zugreifen. Im obigen Beispiel erhält das Element den
id
-Namen info . Mit dem
width
-Attribut bestimmen Sie die Anzeigebreite des
canvas
-Elements in Pixeln und mit
height
die Höhe, ebenfalls in Pixeln. Die Angaben zu
width
und
height
haben ebenso wie bei Pixelgrafikreferenzen die Aufgabe, den Bildschirmaufbau zu optimieren. Wählen Sie die Größen für
width
und
height
so, dass der Inhalt der zu generierenden Grafik in den so definierten Ausschnitt passt.
    Als Inhalt sollte das
canvas
-Element alternativen Content erhalten, falls der Browser das
canvas
-Element nicht kennt oder nicht interpretieren kann (zum Beispiel, weil der Anwender JavaScript deaktiviert hat). Dieser alternative Inhalt sollte, wenn möglich, einen halbwegs brauchbaren Ersatz bieten. Geeignet ist, wie im obigen Beispiel gezeigt, eine gewöhnliche Pixelgrafikreferenz, wobei die darin referenzierte Grafik die Vektorgrafik in Form einer Pixelgrafik wiedergibt oder, falls es sich im Canvas-Bereich um dynamischen Inhalt handelt, einen Screenshot davon.
    Die eigentliche Anzeige innerhalb des
canvas
-Elements, wird in einem Script-Bereich erzeugt, der sich außerhalb des Elements befindet, auf das er sich bezieht. Der Script-Bereich wird durch

markiert. Wenn der Inhalt, wie im obigen Beispiel, aus JavaScript-Code besteht, der beim Einlesen sofort ausgeführt wird, dann muss der Script-Bereich irgendwo unterhalb und darf keinesfalls vor dem
canvas
-Element notiert werden, auf das Bezug genommen wird.
    Der Inhalt des Scripts gehört nicht zu HTML, es handelt sich um JavaScript-Code. Im obigen Beispiel sind typische JavaScript-Anweisungen für das CanvasRenderingContext2D-Objekt notiert. Zunächst wird mit der DOM-Methode
document.getElementById ('info')
auf das HTML-Element mit dem
id
-Namen
info
zugegriffen – im obigen Beispiel also auf das
canvas
-Element, das diesen Namen beim
id
-Attribut erhalten hat. Das Elementobjekt wird in einer Variablen mit Namen
infoPic
gespeichert. Dadurch ist im weiteren Scriptverlauf der bequeme Zugriff auf das Element über diese Variable möglich.
    Mit der Bedingung
if
(infoPic.getContext)
wird überprüft, ob der ausführende Browser in Bezug auf das in
infoPic
gespeicherte
canvas
-Elementobjekt, das CanvasRenderingContext2D-Objekt kennt. Denn nur dann wird er mit den Anweisungen, welche die Grafik erzeugen, etwas anfangen können. Die entsprechenden Anweisungen sind deshalb in einen Anweisungsblock, markiert durch