Manuel de référence HTML

Complexe des balises HTML

Méthode strokeText() de HTML canvas

strokeText() est une méthode de Canvas 2D API pour dessiner du texte à une position (x, y) donnée. Si un quatrième paramètre représentant la valeur maximale est fourni, le texte s'ajuste en fonction de la largeur.

Référentiel HTML canvas

Exemple en ligne

Utilisez strokeText() pour écrire le texte "Réseau de tutos de base!" et "fr.oldtoolbag.com!" (avec dégradé) :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode strokeText() de HTML canvas-Tutoriel de base (oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　Balise canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
2d
ctx.font="20px Georgia";
ctx.strokeText("Réseau de tutos de base!",10,50);
ctx.font="30px Verdana";
//　Créer un dégradé
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","bleu");
gradient.addColorStop("1.0","rouge");
//　Remplir une dégradé
ctx.strokeStyle=gradient;
ctx.strokeText("fr.oldtoolbag.com!10,90);
</script>
</body>
</html>

Voyons par nous-mêmes ‹/›

Compatibilité du navigateur

IEFirefoxOpéraChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge strokeText() Méthode.

Attention :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Attention :Safari ne prend pas en charge le paramètre maxWidth.

Définition et utilisation

La méthode strokeText() dessine du texte sur le canevas (sans remplissage). La couleur par défaut du texte est noire.

Astuce :Utilisez font Propriété pour définir la police et la taille, et utiliser strokeStyle Propriété avec une autre couleur/Rendu du texte avec une dégradé.

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

Valeur du paramètre

Paramètres	Description
text	Texte à afficher sur le canevas.
x	Position x de début du texte à dessiner (par rapport au canevas).
y	Position y de début du texte à dessiner (par rapport au canevas).
maxWidth	Optionnel. Largeur maximale du texte, en pixels.

Référentiel HTML canvas

HTML: <template> balise