HTML5-Handbuch - die neuen Features von HTML5

des
script
-Elements in einer eigenen, separaten Datei zu notieren. Diese Datei erhält einen Namen mit der Dateiendung .js , also beispielsweise canvas-2d-functions.js . In HTML notieren Sie diesen einfach, um die Datei mit den Funktionen einzubinden.
    
    Das Script besteht aus einer globalen Variablen namens
stroke
, die aber nur intern von Bedeutung ist, sowie diversen Funktionen. Alle Funktionen erwarten als ersten Parameter (
obj
) ein gültiges Canvas-Elementobjekt. Wie Sie ein solches Objekt erzeugen, wurde bereits im Beispiel weiter oben gezeigt.
Beispiel:
    …
    
    Dabei ist
infoPic
ein gültiges Canvas-Elementobjekt.
    Nachfolgend werden die Funktionen der kleinen Funktionsbibliothek näher beschrieben.
function rect(obj, x, y, width, height, rx, ry)
    Zeichnet ein Rechteck.
    Parameter
obj
= ein canvas-Elementobjekt
    Parameter
x
= Horizontalversatz der linken oberen Ecke des Rechtecks
    Parameter
y
= Vertikalversatz der linken oberen Ecke des Rechtecks
    Parameter
width
= Breite des Rechtecks
    Parameter
height
= Höhe des Rechtecks
    Parameter
rx
= Wenn das Rechteck abgerundete Ecken haben soll: horizontale Abrundung. Wenn keine runden Ecken erwünscht sind, 0 übergeben.
    Parameter
ry
= Wenn das Rechteck abgerundete Ecken haben soll: vertikale Abrundung. Wenn keine runden Ecken erwünscht sind, 0 übergeben.
    Eigentlich ist es mit der Methode
fillRect()
ganz einfach, ein Rechteck direkt zu erzeugen. Um jedoch die aus dem

-Element von SVG her bekannte Möglichkeit der runden Ecken nachzubilden, ist etwas mehr Aufwand erforderlich. Das Rechteck wird innerhalb der Funktion
rect()
Stück für Stück gezeichnet. Das Zeichnen wird durch die Methode
beginPath()
eingeleitet und durch das Gegenstück
closePath()
beendet.
moveTo()
setzt den »Zeichenstift« auf eine Anfangsposition. Mit
lineTo()
werden Linien gezeichnet und mit
quadraticCurveTo()
einfache Kurven. Durch
lineTo()
entstehen also die Seiten des Rechtecks und durch
quadraticCurveTo()
die runden Ecken, wobei letztere nur optisch sichtbar sind, wenn die Parameter
rx
bzw.
ry
größer als 0 sind.
function circle(obj, cx, cy, r)
    Zeichnet einen Kreis.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Parameter
cx
= Horizontalversatz des Kreismittelpunktes
    Parameter
cy
= Vertikalversatz des Kreismittelpunktes
    Parameter
r
= Größe des Radius
    Die Kreisfunktionalität wird intern durch den etwas komplizierten Aufruf der Methode
arc()
realisiert. Ein Kreis ist dabei nichts anderes als ein 360°-Bogen. Deshalb ist auch die Angabe
2 * Math.PI
als Wert eines der Methodenparameters erforderlich.
Math
ist ein JavaScript-Objekt für mathematische Funktionen und
PI
die bekannte geometrische Konstante für Kreis- und Bogenberechnung.
    Die Funktion
circle()
ist dem SVG-Element

nachempfunden.
function ellipse(obj, x, y, w, h)
    Zeichnet eine Ellipse.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Parameter
x
= Horizontalversatz des Ellipsenmittelpunktes
    Parameter
y
= Vertikalversatz des Ellipsenmittelpunktes
    Parameter
w
= Horizontaler Radius bzw. die halbe Maximalbreite der Ellipse
    Parameter
h
= Vertikaler Radius bzw. die halbe Maximalhöhe der Ellipse
    Das Erzeugen einer Ellipse ist im 2D-Rendering-Context nicht trivial, da die Ellipse einzeln durch vier aneinandergereihte Bézierkurven erzeugt werden muss. Dazu dient die Methode
bezierCurveTo()
. Damit die Bézierkurven die gewünschte Krümmung erhalten, müssen zuvor geeignete Kurvenkontrollpunkte definiert werden. Dabei kommt auch die geometrische Konstante Kappa zum Einsatz.
    Die Funktion
ellipse()
ist dem SVG-Element

nachempfunden.
function polygon(obj, points)
    Zeichnet ein Polygon mit einer beliebigen Anzahl von Ecken (auch für Dreiecke geeignet).
    Parameter
obj
= ein canvas-Elementobjekt
    Parameter
points
= Die Eckpunkte des Polygons in Form einer Zeichenkette, die in Anführungszeichen "…" oder '…' eingeschlossen werden muss und folgenden Aufbau hat: Eckpunkte werden durch
x
,
y
definiert (ohne Leerzeichen dazwischen) und durch genau ein Leerzeichen voneinander getrennt. Beispiel:
"30,40 90,230 60,450"
. Der Wert vor dem Komma ist jeweils der Horizontalversatz des Eckpunkts, der Wert hinter dem Komma der Vertikalversatz des Eckpunkts. Das Polygon wird automatisch geschlossen, indem der letzte Eckpunkt mit dem