Dessin de texte avec canvas

L'élément <canvas> permet de dessiner du texte à travers des API expérimentales spécifiques à Mozilla.

Aperçu des méthodes

Attributs

ctx.mozTextStyle = "20pt Arial";

Méthodes

mozDrawText()

Dessine le texte spécifié en utilisant le style de texte indiqué par l'attribut mozTextStyle. La couleur de remplissage du contexte courant est utilisée comme couleur de texte.

void mozDrawText(
   in DOMString textToDraw
);

Paramètres

textToDraw

Le texte à dessiner dans le contexte.

Exemple

ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Exemple de texte");

Cet exemple dessine le texte « Exemple de texte » en rouge aux coordonnées (10,50) dans le canevas.

mozMeasureText()

Renvoie la largeur en pixels que le texte spécifié occupera s'il est dessiné dans le style de texte courant.

float mozMeasureText(
  in DOMString textToMeasure
);

Paramètres

textToMeasure

La chaîne dont la largeur en pixels doit être déterminée.

Valeur de retour

La largeur du texte en pixels.

Exemple

var text = "Exemple de texte";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate((width - len)/2, 0);
ctx.mozDrawText(text);

Cet exemple détermine la largeur de la chaîne, puis utilise cette information pour la dessiner centrée horizontalement au sein du canevas.

mozPathText()

Ajoute les traits du texte spécifié au chemin courant. Ceci permet de dessiner le texte au trait au lieu de le remplir.

void mozPathText(
  in DOMString textToPath
);

Paramètres

textToPath

Le texte dont les traits doivent être ajoutés au chemin courant.

Exemple

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Exemple de texte");
ctx.fill()
ctx.stroke()

Cet exemple dessine le texte « Exemple de texte » en vert entouré de noir en ajoutant les traits du texte au chemin courant, puis en remplissant le chemin et en le dessinant.

mozTextAlongPath()

Ajoute (ou dessine) le texte spécifié le long du chemin courant.

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);

Paramètres

textToDraw

Le texte à dessiner le long du chemin spécifié.

stroke

Si ce paramètre vaut true, le texte est dessiné le long du chemin spécifié. S'il vaut false, le texte est plutôt ajouté au chemin, à la suite du chemin existant.

Remarques

Les glyphes ne sont pas redimensionnés ou transformés selon la courbure du chemin ; au lieu de cela, chaque glyphe est rendu en traitant le chemin comme s'il s'agissait d'une ligne droite interpolée selon la courbure du chemin. Ceci peut être utilisé pour créer des effets très intéressants.

Remarques

• Ces extensions de texte pour canvas ne sont pas encore standardisées par le WHATWG.
• Il n'est pas nécessaire d'utiliser un contexte particulier ; le contexte 2D fonctionne très bien.
• Tous les dessins sont faits en utilisant la transformation courante.
• Consultez les bug 339553 si vous désirez en savoir plus sur les détails de l'implémentation.

Exemples supplémentaires

• Stroking text around paths (dessiner du texte autour de chemins)
• Drawing along a path (dessiner le long d'un chemin)
• Animating text moving around a circle (texte animé bougeant autour d'un texte.