We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

La méthode CanvasRenderingContext2D.fillText() de l'API Canvas 2D écrit un texte donné à la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.

Voir aussi la méthode CanvasRenderingContext2D.strokeText() pour dessiner un texte mis en forme.

Syntaxe

void ctx.fillText(texte, x, y [, largeurMax]);

Paramètres

texte
Le texte à représenter en utilisant les valeurs en cours de font, textAlign, textBaseline, et de direction.
x
La valeur de la coordonnée sur l'axe des x du point de début du texte.
y
La valeur de la coordonnée sur l'axe des y du point de fin du texte.
largeurMax Facultatif
La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.

Exemples

Utilisation de la méthode fillText

Ceci est seulement un fragment de code simple utilisant la méthode fillText.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);

Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'CanvasRenderingContext2D.fillText' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support de base (Oui) (Oui) 3.5 (1.9.1) 9 (Oui) (Oui)
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base (Oui) (Oui) (Oui) 1.0 (1.9.1) (Oui) (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : NemoNobobyPersonne
Dernière mise à jour par : NemoNobobyPersonne,