Beispiel
Schreiben Sie "Hello world!" und "Big smile!" (mit Gefälle) auf der Leinwand, mit fillText() :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| fillText() | ja | 9.0 | ja | ja | ja |
Hinweis: Der maxWidth Parameter wird nicht unterstützt in Safari 5.1 und frühere Versionen.
Definition und Verwendung
Die fillText() Methode zeichnet gefüllter Text auf der Leinwand. Die Standardfarbe des Textes ist schwarz.
Tipp: Verwenden Sie die font Eigenschaft Schriftart und Schriftgröße angeben, und die Verwendung fillStyle Eigenschaft , um den Text in einer anderen Farbe / Gefälle zu machen.
| JavaScript-Syntax: | context.fillText(text,x,y,maxWidth); |
|---|
Parameterwerte
| Parameter | Beschreibung | Spiel es |
|---|---|---|
| text | Gibt den Text an, der auf die Leinwand geschrieben werden | Spiel es " |
| x | Die x-Koordinate, wo die Malerei den Text (in Bezug auf die Leinwand) zu starten | Spiel es " |
| y | Die y-Koordinate, wo die Malerei den Text (in Bezug auf die Leinwand) zu starten | Spiel es " |
| maxWidth | Optional. Die maximal zulässige Breite des Textes in Pixeln | Spiel es " |