HTML Referenzhandbuch

Vollständiges HTML-Tag-Verzeichnis

HTML canvas fillText() Methode

fillText() ist eine Methode von Canvas 2D API im (x, y)-Positionstext zu füllen. Wenn der vierte Parameter der Option eine maximale Breite bereitstellt, wird der Text skaliert, um die maximale Breite anzupassen.

HTML canvas Reference Manual

Online-Beispiel

Verwenden Sie fillText(), um Text "Grundlagen-Tutorial-Website!" und "oldtoolbag.com!":

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Verwendung der Methode fillText() in HTML canvas-Grundlagen-Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tags.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Grundlagen-Tutorial-Website!",10,50);
ctx.font="30px Verdana";
//　Erstellen Sie einen Farbverlauf.
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blau");
gradient.addColorStop("1.0","rot");
//　Füllen Sie eine Farbverlauf.
ctx.fillStyle=gradient;
ctx.fillText("oldtoolbag.com!10,90);
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Browserkompatibilität

IEFirefoxOperChromeSafari

Internet Explorer 9,Firefox, Opera, Chrome and Safari support fillText() Method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Note:Safari does not support the maxWidth parameter.

Definition and Usage

The fillText() method draws filled text on the canvas. The default text color is black (#000000).

Tip:Please use font Property to define the font and size, and use fillStyle Property with another color/Render text with gradients.

JavaScript Syntax:	context.fillText(text,x,y,maxWidth);

Parameter Value

Parameter	Description
text	Specifies the text to be output on the canvas.
x	The x coordinate position at which to start drawing the text (relative to the canvas).
y	The y coordinate position at which to start drawing the text (relative to the canvas).
maxWidth	Optional. The maximum text width in pixels allowed.

HTML canvas Reference Manual

HTML: <template> Tag