HTML and CSS Reference
In-Depth Information
Zuletzt demonstrieren wir die Auswirkung eines veränderten
miterLimit
. Wir zeich-
nen Zickzacklinien und setzen pro Durchgang das
miterLimit
. Während der ersten
drei Durchgänge ist
miterLimit
nicht hoch genug gesetzt, wodurch die aufeinander
zulaufenden Linien hart abgebrochen werden. Die letzten beiden Verbindungen sind
jedoch spitz, da hier
miterLimit
auf einen Wert gesetzt wurde, der diese weit über die
Linien hinausgehende Verbindung zulässt.
Bild 2.17:
Zickzacklinien mit
miterLimit
.
//zigzag for miterLimit
ctx.lineWidth 2;
ctx.lineJoin 'miter';
var startX;
for (i 0; i<5; i++)
{
ctx.beginPath();
ctx.miterLimit i*5;
startX (150+(i*10));
ctx.moveTo(startX, 250);
ctx.lineTo(startX+5, 200);
ctx.lineTo(startX+10, 250);
ctx.stroke();
}
Die folgende Tabelle fasst die wichtigsten Fakten zu den Attributen rund um Füllstil,
Strichstil und die diversen Linienstile zusammen.
Attribut
Standard
Mögliche Werte
Ein CSS-Farbwert, Verlauf (
CanvasGradient
) oder
Muster (
CanvasPattern
).
fillStyle
#000000
Ein CSS-Farbwert, Verlauf (
CanvasGradient
) oder
Muster (
CanvasPattern
).
strokeStyle
#000000
Positiver Zahlenwert.
lineWidth
1
butt
,
round
und
square
.
lineCap
butt
bevel
,
round
und
miter
.
lineJoin
miter
Positiver Zahlenwert.
miterLimit
10
2.3.5
Verläufe, Muster, Schatten
Die Canvas-API erlaubt die Benutzung von Verläufen und Mustern für die nun
bekannten Attribute
fillStyle
und
strokeStyle
. Um ein Verlauf oder ein Muster zu
