HTML canvas strokeText()Methode
Beispiel
Verwende strokeText(), um den Text "Hello world!" und "Big smile!" auf das Canvas zu schreiben (mit Farbverlauf):
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";
// Farbverlauf erstellen
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Mit Farbverlauf füllen
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);
ctx.font="30px Verdana";
// Farbverlauf erstellen
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Mit Farbverlauf füllen
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
Selbst ausprobieren »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die Methode strokeText().
Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
Hinweis:Safari unterstützt den Parameter maxWidth nicht.
Definition und Verwendung
Die Methode strokeText() zeichnet Text auf das Canvas (ohne Füllfarbe). Die Standardfarbe des Textes ist Schwarz.
Tipp:Bitte verwenden Sie diefont-Eigenschaft, um die Schriftart und Schriftgröße festzulegen, und verwenden Sie diestrokeStyle-Eigenschaft, um den Text in einer anderen Farbe/einem anderen Farbverlauf darzustellen.
| JavaScript-Syntax: | context.strokeText(text,x,y,maxWidth); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| text | Gibt den Text an, der auf dem Canvas ausgegeben werden soll. |
| x | Die x-Koordinatenposition, an der das Zeichnen von Text beginnt (relativ zum Canvas). |
| y | Die y-Koordinatenposition, an der das Zeichnen von Text beginnt (relativ zum Canvas). |
| maxWidth | Optional. Die maximal zulässige Textbreite in Pixeln. |
HTML-Canvas-Referenz Andere Erweiterungen