L'élément <canvas>
permet de dessiner du texte à travers des API expérimentales spécifiques à Mozilla.
Aperçu des méthodes
void mozDrawText(in DOMString textToDraw); |
float mozMeasureText(in DOMString textToMeasure); |
void mozPathText(in DOMString textToPath); |
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke); |
Attributs
Attribut | Type | Description |
mozTextStyle |
DOMString |
Le style de texte actuellement utilisé pour dessiner du texte. Cette chaîne utilise la même syntaxe que l'instruction CSS font. Pour modifier le style de texte à utiliser, changez simplement la valeur de cet attribut, comme montré dans Changing the current font ci-dessous. La police par défaut est 12-point sans-serif.
Par exemple : 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 vautfalse
, 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.