HTML canvas fillText() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

fillText() Die Methode zeichnet gefüllten Text auf dem Canvas. Die Standardfarbe des Textes ist schwarz.

Hinweis:Verwenden Sie font Eigenschaft, um Schriftart und -größe zu definieren, und verwenden Sie fillStyle Eigenschaften, um Text mit einer anderen Farbe/Verlauf anzuzeigen.

Beispiel

Verwenden Sie fillText(), um Text "Hello world!" und "codew3c.com" auf dem Canvas zu schreiben:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

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";
// Erstellen Sie eine Farbverlauf
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Mit dem Gradienten füllen
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

Probieren Sie es selbst aus

Syntax

context.fillText(text,x,y,maxWidth);

Parameterwert

Parameter Beschreibung
text Text, der auf dem Canvas ausgegeben wird.
x x-Koordinatenposition, an der der Text gezeichnet wird (relativ zum Canvas).
y y-Koordinatenposition, an der der Text gezeichnet wird (relativ zum Canvas).
maxWidth Optional. Maximale Textbreite in Pixeln.

Browserunterstützung

Die in der Tabelle genannten Zahlen geben die erste Browserversion an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

HTML5 Canvas Referenzhandbuch