Manuale di riferimento HTML

HTML tag大全

HTML canvas strokeText() method

The strokeText() is a method of the Canvas 2D API to draw text at the given (x, y) position. If the fourth parameter, representing the maximum value, is provided, the text will be scaled to fit the width.

Manuale di riferimento per HTML canvas

Online Example

Use strokeText() to write text "Basic Tutorial Website!" and "it.oldtoolbag.com!" (with gradient):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas strokeText() 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.strokeText("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.strokeStyle=gradient;
ctx.strokeText("it.oldtoolbag.com!",10,90);
</script>
</body>
</html>

Test and see </>

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano strokeText() Metodi.

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

Attenzione:Safari non supporta il parametro maxWidth.

Definizione e uso

La metodo strokeText() disegna il testo sul canvas (senza riempimento). Il colore predefinito del testo è nero.

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

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

Valore del parametro

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

Manuale di riferimento per HTML canvas

HTML: <template> etichetta