In einem Canvas-Objekt kann man nicht nicht grafische Elemente im herkömmlichen Sinn oder bereits existierende Grafik-Dateien darstellen, sondern auch Text.
Die beiden Hauptmethoden zum Anzeigen von Text in einem Cavas-Objekt sind
fillText(text, xPosition, yPosition [,Maxbreite]) und strokeText(text, xPosition, yPosition [,Maxbreite])Der optionale Parameter Maxbreite gibt die maximale Breite des Textobjektes an, der Text wird,
wenn erforderlich, skaliert
Die Darstellung des Textes wird durch die folgenden Attribute des Text-Interfaces beeinflusst:
font('Textwert'), ist ein Textwert, der sich an der Kurzdarstellung in
CSS-Dateien orientierttextAlign('Textkonstante'), wobei die Textkonstante start, end,
left, right, oder center sein kann.textBaseline('Textkonstante'), wobei die Textkonstante top,
hanging, middle,
alphabetic,
ideographic oder
bottom sein kann.Außerdem wirken sich auf die Darstellung des Textes die Attribute strokeStyle, fillStyle, shadowOffsetX, shadowOffsetY, shadowBlur und ShadowColor aus.
Zunächst ein triviales Beispiel mit der Methode fillText:
var myCanvas = document.getElementById('canvas_id');
if(myCanvas.getContext){
var cx = myCanvas.getContext('2d');
//Zeichnungsfläche löschen
clean(cx);
//Einstellungen sichern
cx.save();
//Einfach etwas Text ausgeben
cx.fillText("Text mit Standardeinstellungen mit Methode fillText", 0, 10);
//Einstellungen wiederherstellen
cx.restore();
}
Da alle für die Textdarstellung erforderlichen Attribute bereits mit den Standardwerten vorbelegt sind, wird auch Text
angezeigt. Das Gleiche gilt für dieses Trivialbeispiel mit der Methode strokeText:
var myCanvas = document.getElementById('canvas_id');
if(myCanvas.getContext){
var cx = myCanvas.getContext('2d');
clean(cx);
//Einstellungen sichern
cx.save();
cx.strokeText("Text mit Standardeinstellungen mit Methode strokeText", 0, 10);
//Einstellungen wiederherstellen
cx.restore();
}
Unter den Eingangs genannten textspezifischen Attributen ragt hinsichtlich der Bedeutung das Attribut font('Textwert')
heraus. Mit dem Textwert werden ähnlich der CSS-Shorthand-Notierung Schriftart, Schriftgröße sowie die Merkmale fett und kursiv
festgelegt. Das geschieht so:
var myCanvas = document.getElementById('canvas_id');
if(myCanvas.getContext){
var cx = myCanvas.getContext('2d');
clean(cx);
//Einstellungen sichern
cx.save();
cx.fillText("Text mit Standardfont und fillText", 0, 10);
cx.strokeText("Text mit Standardfont und strokeText",300, 10);
//Schrift festlegen
cx.font = 'bold italic 16px Verdana';
cx.fillText('fill bold italic 16px Verdana', 0, 50);
cx.strokeText('stroke bold italic 16px Verdana',300, 50);
//Einstellungen wiederherstellen
cx.restore();
}
Das Aussehen der mit strokeText erzeugten Textgrafik kann mit strokeStyle und lineWidth beeinflusst werden. Für fillText ist nur
fillStyle ausschlaggebend.
Bei der Zuordnung von strokeStyle und fillStyle können auch Gradienten verwendet werden.
Beide Methoden können auch ein zuvor mit createPattern erzeugtes Muster verwenden.
Wie Anfangs bereits erwähnt kann beiden Methoden der optionale Parameter Maxbreite mitgegeben werden. Dadurch kann
die Zeichnungsbreite des Textes verringert werden. Eine Verbreiterung ist hingegen nicht möglich.
Um die ursprüngliche Ausgabebreite des Textes zu ermitteln wird die Methode measureText verwendet.
var myCanvas = document.getElementById('canvas_id');
if(myCanvas.getContext){
var cx = myCanvas.getContext('2d');
clean(cx);
//Einstellungen sichern
cx.save();
//Schrift festlegen
cx.font = '18px Verdana';
tx1='Text Verdana 18px und fillText'
tx2='Text Verdana 18px und strokeText'
cx.fillText(tx1, 0, 20);
cx.strokeText(tx2,320, 20);
var tx1m=cx.measureText(tx1);
var tx2m=cx.measureText(tx2);
//Text auf 90% skalieren
cx.fillText(tx1, 0, 45, tx1m.width*0.9);
cx.strokeText(tx2,320, 45, tx2m.width*0.9);
//Text auf 110% skalieren bewirkt nichts
cx.fillText(tx1, 0, 65, tx1m.width*1.1);
cx.strokeText(tx2,320, 65, tx2m.width*1.1);
//Einstellungen wiederherstellen
cx.restore();
}