HTML Reference Manual

HTML Tag Directory

HTML canvas fillText() Method

The fillText() method of the Canvas 2D API fills text at the specified (x, y) position. If the fourth parameter of the options provides a maximum width, the text will be scaled to fit the maximum width.

Manuale di riferimento per HTML canvas

Online Example

Use fillText() to write text "Basic Tutorial Website!" and "oldtoolbag.com!" with gradient on the canvas:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas fillText() Method Usage - Basic Tutorial (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Basic Tutorial Website!",10,50);
ctx.font="30px Verdana";
// Create a 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 a gradient
ctx.fillStyle=gradient;
ctx.fillText("oldtoolbag.com!",10,90);
</script>
</body>
</html>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano fillText() Metodo.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Attenzione:Safari non supporta il parametro maxWidth.

Definizione e uso

Il metodo fillText() disegna il testo riempito sul canvas. Il colore predefinito del testo è nero (#000000).

Suggerimento:Utilizzare font Proprietà per definire il tipo di carattere e la dimensione, e utilizzare fillStyle Proprietà per rendere il testo con un altro colore/gradiente.

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

Valore del parametro

Parametro	Descrizione
text	Testo da visualizzare sul canvas.
x	La posizione x della coordinate di partenza del testo (rispetto al canvas).
y	La posizione y della coordinate di partenza del testo (rispetto al canvas).
maxWidth	Opzionale. L'ampiezza massima del testo, espressa in pixel.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta