Nachdem wir im vorigen Kapitel gesehen haben, wie man Gestaltung und Farben anwendet , werden wir nun einen Blick darauf werfen, wie man Text auf ein canvas
zeichnet.
Text zeichnen
Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:
fillText(text, x, y [, maxWidth])
- Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
strokeText(text, x, y [, maxWidth])
- Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
ein fillText
-Beispiel
Der Text wird mit dem aktuellen fillStyle
gefüllt.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px serif';
ctx.fillText('Hello world', 10, 50);
}
ein strokeText
-Beispiel
Der Text wird mit dem aktuellen strokeStyle
umrandet.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px serif';
ctx.strokeText('Hello world', 10, 50);
}
Text gestalten
In den obigen Beispielen nutzen wir bereits die font
-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem canvas
zu beeinflussen:
font = value
- Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die CSS
font
-Eigenschaft. Die Standard-Schriftart ist10px sans-serif
. textAlign = value
- Einstellung der Text-Ausrichtung. Mögliche Werte:
start
,end
,left
,right
odercenter
. Der Standard-Wert iststart
. textBaseline = value
- Baseline alignment setting. Possible values:
top
,hanging
,middle
,alphabetic
,ideographic
,bottom
. The default value isalphabetic
. direction = value
- Directionality. Possible values:
ltr
,rtl
,inherit
. The default value isinherit
.
These properties might be familiar to you, if you have worked with CSS before.
The following diagram from the WHATWG demonstrates the various baselines supported by the textBaseline
property.
A textBaseline example
Edit the code below and see your changes update live in the canvas:
ctx.font = '48px serif';
ctx.textBaseline = 'hanging';
ctx.strokeText('Hello world', 0, 100);
Advanced text measurements
In the case you need to obtain more details about the text, the following method allows you to measure it.
measureText()
- Returns a
TextMetrics
object containing the width, in pixels, that the specified text will be when drawn in the current text style.
The following code snippet shows how you can measure a text and get its width.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText('foo'); // TextMetrics object
text.width; // 16;
}
Gecko-specific notes
In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some prefixed APIs were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.