HTML and CSS Reference
In-Depth Information
Bild 2.11:
Beispiel zur Textausrichtung.
Das Wort
baseline
wird mittels
fillText()
auf den Canvas gezeichnet. Je Durchgang
wird die y-Position verändert, ebenso wird eine horizontale Linie ab der Position
gezeichnet, die auch für die
fillText()
-Methode verwendet wird.
Von oben nach unten:
•
top
•
hanging
•
middle
•
alphabetic
(Standard)
•
ideographic
•
bottom
Das Wort
align
wird zunächst per
measureText()
abgemessen. Dann wird ab der
Wortmitte eine vertikale Linie zum Ende des Canvas gezeichnet. Das verdeutlicht die
Wirkung des
textAlign
-Attributs.
Von oben nach unten:
•
start
(Standard)
•
end
•
left
•
right
•
center
function text(){
var textBaseline ["top", "hanging", "middle", "alphabetic",
"ideographic", "bottom"];
var y;
ctx.font "20px Georgia";
for (pos in textBaseline)
{
ctx.textBaseline textBaseline[pos];
ctx.beginPath();
y (20 + (40*pos));
ctx.lineStyle "rgb(255,0,0)";
ctx.moveTo(10, y);
ctx.lineTo(270, y);
ctx.stroke();
ctx.fillText('baseline', 10, y);
