Darstellen von Texten in einem Canvas-Objekt

In einem Canvas-Objekt kann man nicht nicht grafische Elemente im herkömmlichen Sinn oder bereits existierende Grafik-Dateien darstellen, sondern auch Text.

Methoden

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

Attribute des Textinterfaces

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 orientiert
• textAlign('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();
}

Beispiel ansehen

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();
}

Beispiel ansehen

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();
}

Beispiel ansehen

Weitere Attribute

Das Aussehen der mit strokeText erzeugten Textgrafik kann mit strokeStyle und lineWidth beeinflusst werden. Für fillText ist nur fillStyle ausschlaggebend.

Beispiel ansehen

Texte mit Gradient

Bei der Zuordnung von strokeStyle und fillStyle können auch Gradienten verwendet werden.

Beispiel ansehen

Texte mit Muster

Beide Methoden können auch ein zuvor mit createPattern erzeugtes Muster verwenden.

Beispiel ansehen

Parameter maxbreite und Methode measureText

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();
}

Beispiel ansehen