HTML and CSS Reference
In-Depth Information
ctx.moveTo(0, i);
ctx.lineTo(280, i);
ctx.stroke();
}
//draw partially transparent rectangles over this
for (var i 0; i<10; i++)
{
ctx.globalAlpha 0.1 + 0.1 * i;
ctx.fillStyle "rgb(0,0,255)";
ctx.fillRect(50, 300/10*i, 30, 30);
}
//use rgba instead of globalAlpha
ctx.globalAlpha 1;
for (var i 0; i<10; i++)
{
ctx.fillStyle "rgba(0,255,0,"+(0.1 + 0.1*i)+")";
ctx.fillRect(200, 300/10*i, 30, 30);
}
Zur Kontrolle der Linien stellt die Canvas-API gleich mehrere Attribute zur Verfügung.
Diese sind
lineWidth
(Breite der Linie),
lineCap
(definiert das Aussehen der Linien-
enden),
lineJoin
(definiert, wie zwei Linien verbunden werden) und
miterLimit
(siehe Beispiel).
lineWidth
ist einfach zu verstehen, da sicherlich jeder schon einmal mit unterschied-
lichen Linienbreiten in Malprogrammen experimentiert hat:
Bild 2.14:
Unterschiedliche Linienbreiten mit
lineWidth
.
//lineWidth
for (var i 0; i<10; i++) {
ctx.lineWidth i;
ctx.beginPath();
ctx.moveTo(280/10*i, 0);
ctx.lineTo(280/10*i, 20);
ctx.stroke();
}
Dem Attribut
lineCap
können drei Werte zugewiesen werden,
butt
,
round
und
square
. Unser Beispiel demonstriert die Auswirkungen auf die Linienenden. Zunächst
wird ein Quadrat gezeichnet, dann werden drei Linien gleicher Länge innerhalb des
Quadrats gezeichnet:
