HTML canvas strokeText() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

strokeText() Die Methode zeichnet Text auf die Leinwand (ohne Füllung). Die Standardfarbe ist schwarz.

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

Beispiel

Verwenden Sie strokeText(), um Text "Hello world!" und "codew3c.com" auf der Leinwand 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.strokeText("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.strokeStyle=gradient;
ctx.strokeText("codew3c.com",10,90);

Selbst ausprobieren

Syntax

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

Parameterwert

Parameter Beschreibung
text Text, der auf dem Canvas ausgegeben wird.
x x-Koordinatenposition zum Zeichnen des Textes (relativ zum Canvas).
y y-Koordinatenposition zum Zeichnen des Textes (relativ zum Canvas).
maxWidth Optional. Maximale Textbreite in Pixel.

Browserunterstützung

Die Zahlen in der Tabelle 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