MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CanvasRenderingContext2D.strokeText()

La méthode CanvasRenderingContext2D.strokeText() de l'API Canvas 2D trace le texte fourni à la position donnée (x, y). Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.

Voir aussi la méthode CanvasRenderingContext2D.fillText() pour dessiner un texte rempli.

Syntaxe

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

Paramètres

texte
Le texte à tracer en utilisant les valeurs en cours de font, textAlign, textBaseline, et direction.
x
La coordonnée sur l'axe des x du point de départ du texte.
y
La coordonnée sur l'axe des y du point de départ du texte.
largeurMax Facultatif
La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.

Exemples

Utilisation de la méthode strokeText

Il ne s'agit que d'un extrait de code simple qui utilise la méthode strokeText.

HTML

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

JavaScript

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

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

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct 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.strokeText("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
WHATWG HTML Living Standard
La définition de 'CanvasRenderingContext2D.strokeText' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

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,