HTML5-Handbuch - die neuen Features von HTML5

ersten verbunden wird. Mit drei Eckpunkten können Sie ein Dreieck erzeugen.
    Die Funktion parst die übergebene Zeichenkette
points
und zeichnet mit der
lineTo()
-Methode Linien zwischen den einzelnen Eckpunkten.
    Die Funktion
polygon()
ist dem SVG-Element

nachempfunden.
function line(obj, x1, y1, x2, y2, sWidth)
    Zeichnet eine Linie.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Parameter
x1
= Horizontalversatz des einen Eckpunkts der Linie
    Parameter
y1
= Vertikalversatz des einen Eckpunkts der Linie
    Parameter
x2
= Horizontalversatz des anderen Eckpunkts der Linie
    Parameter
y2
= Vertikalversatz des anderen Eckpunkts der Linie
    Parameter
sWidth
= Linienstärke
    Die Funktion
line()
ist dem SVG-Element

nachempfunden und übernimmt das Positionieren und Zeichnen einer Linie. Die Linienstärke muss angegeben werden und bestimmt die Linienstärke in Pixeln, ohne diese Angabe wäre die Linie unsichtbar.
function setFill(obj, col)
    Setzt die Füllfarbe für nachfolgende Formen. Muss also aufgerufen werden, wenn ein nachfolgender Aufruf etwa von
rect()
,
circle()
usw. ein farbiges Objekt erzeugen soll.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Parameter
col
= Füllfarbe in Form einer Zeichenkette, eingeschlossen in "…" oder '…'. Bei Farbangaben gelten die gleichen Regeln wie für Farbwerte und Farbnamen in CSS. Möglich sind Angaben wie
#DD6600
,
rgb(50,50,200)
,
rgb(100%,80%,10%)
oder
powderblue
.
    Die Funktion ruft die Eigenschaften
fillStyle
und
strokeStyle
des CanvasRenderingContext2D-Objekts auf.
function setStroke(obj, col, sWidth)
    Setzt die Umrissfarbe für nachfolgende Formen. Muss aufgerufen werden, wenn ein nachfolgender Aufruf etwa von
rect()
,
circle()
usw. ein Objekt mit sichtbarer/andersfarbiger Umrisslinie erzeugen soll.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Parameter
col
= Füllfarbe in Form einer Zeichenkette, eingeschlossen in "…" oder '…'. Bei Farbangaben gelten die gleichen Regeln wie für Farbwerte und Farbnamen in CSS.
    Parameter
sWidth
= Linienstärke des Umrisses
function unset(obj)
    Löscht gesetzte Füll- und Umrissdefinitionen.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Diese Funktion ist dazu da, die Wirkung der Funktionen
setFill()
und
setStroke()
wieder aufzuheben. Werden einmal gesetzte Werte für Füllung und/oder Umriss nicht wieder entfernt, gelten sie für alle weiteren erzeugten Formen.
function setLinearFill(obj, col1x, col1y, col2x, col2y, col1, col2)
    Definiert einen linearen Farbübergang als Füllung.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Parameter
col1x
= Horizontalversatz des Startpunkts für Farbe 1
    Parameter
col1y
= Vertikalversatz des Startpunkts für Farbe 1
    Parameter
col2x
= Horizontalversatz des Startpunkts für Farbe 2
    Parameter
col2y
= Vertikalversatz des Startpunkts für Farbe 2
    Parameter
col1
= Farbe 1 in Form einer Zeichenkette, eingeschlossen in "…" oder '…'. Bei Farbangaben gelten die gleichen Regeln wie für Farbwerte und Farbnamen in CSS.
    Parameter
col2
= Farbe 2 in Form einer Zeichenkette.
    Die Eckpunkte für die beiden »Farbstopps« müssen Sie so wählen, dass diese für eine Form passen, auf die Sie den Farbübergang anwenden möchten. Siehe dazu das Beispiel weiter unten.
    Intern ruft die Funktion die Objektmethode
createLinearGradient()
auf, mit deren Hilfe lineare Farbübergänge im 2D-Rendering-Context erzeugt werden. Dabei wird ein Unterobjekt erzeugt, das innerhalb der Funktion in der Variablen
gradient
gespeichert wird. Darauf wiederum lässt sich die Methode
addColorStop()
anwenden, die die beiden Farben des Übergangs setzt. Durch Zuweisen des Unterobjekts mit dem Namen
gradient
an die Objekteigenschaft
fillStyle
wird der Farbübergang mit dem Objekt verknüpft.
function setRadialFill(obj, col1x, col1y, col1r, col2x, col2y, col2r, col1, col2)
    Definiert einen radialen Farbübergang als Füllung.
    Parameter
obj
= ein
canvas
-Elementobjekt
    Parameter
col1x
= Horizontalversatz des Startpunkts für Farbe 1
    Parameter
col1y
= Vertikalversatz des Startpunkts für Farbe 1
    Parameter
col1r
= Radius (Ausbreitungsweise) für Farbe 1
    Parameter
col2x
= Horizontalversatz des Startpunkts für Farbe 2
    Parameter
col2y
= Vertikalversatz des Startpunkts für Farbe 2
    Parameter
col2r
= Radius (Ausbreitungsweise) für Farbe 2
    Parameter
col1
= Farbe 1 in Form einer Zeichenkette, eingeschlossen in "…" oder '…'. Bei Farbangaben gelten die gleichen Regeln wie für Farbwerte und Farbnamen in CSS.
    Parameter
col2
= Farbe