Dessin de texte avec canvas

  • Raccourci de la révision : Dessin_de_texte_avec_canvas
  • Titre de la révision : Dessin de texte avec canvas
  • ID de la révision : 165989
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire a renommé Canvas:Texte en Dessin de texte avec canvas

Contenu de la révision

{{template.Gecko_minversion_header(1.9)}} {{template.Firefox3()}} À partir de Firefox 3 (Gecko 1.9), l'élément <canvas> permet de dessiner du texte à travers des API expérimentales spécifiques à Mozilla.

API

attribute DOMString mozTextStyle; 
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);

Exemples

Consultez quelques exemples ici, ici et ici. Vous aurez besoin au minimum d'une version de Firefox 3a7 (pour les utilisateurs de Windows, une « nightly » postérieure à l'alpha 7).

Notes

  • La police par défaut est 12pt sans serif
  • Ces extensions de texte ne sont pas encore standardisées par le WHATWG
  • Il n'est pas nécessaire d'avoir un contexte particulier pour les utiliser ; le contexte 2d fonctionne parfaitement
  • Tous les dessins sont faits à l'aide de la transformation courante
  • Implémentation dans le {{template.Bug(339553)}}

Changement de la police courante

L'attribut mozTextStyle reflète le style de texte courant. Il utilise la même syntaxe que l'indicateur CSS font.

Exemple :

ctx.mozTextStyle = "20pt Arial"

Dessin de texte

Le dessin est très simple. mozDrawText utilise le style de texte courant. La couleur de remplissage du contexte est utilisée comme couleur de texte.

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

Mesures de texte

Il est parfois utile de connaître la largeur d'une séquence particulière de texte (par exemple pour la centrer dans une fenêtre).

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

Interaction texte/chemin

Si vous voulez former un chemin à partir d'un texte, ce n'est pas possible avec mozDrawText. Cependant, mozPathText ajoute les contours du texte au chemin courant.

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

Imaginons maintenant que vous ayez un chemin le long duque vous désirez ajouter du texte (une ligne courbe par exemple) ; c'est ici qu'intervient mozTextAlongPath. Contrairement aux autres fonctions de texte, mozTextAlongPath reçoit deux paramètres : le texte et ce qu'il faut faire avec. mozTextAlongPath fait une approximation du chemin sous la forme d'une série de segments de droite et place chaque glyphe le long de ce chemin aplati. Les glyphes ne sont pas redimensionnés ou transformés selon la courbe de leur ligne de base ; ils prennent l'orientation du chemin aplati au milieu du glyphe.

Une fois que mozTextAlongPath sait où se trouvent les glyphes, elle examine le second paramètre pour savoir ce qu'il faut en faire. S'il vaut false, les glyphes seront dessinés comme mozDrawText le ferait. S'il vaut true, les glyphes seront ajoutés au chemin courant, comme mozPathText le ferait. On peut utiliser cela pour créer certains effets extraordinaires.


{{ wiki.languages( { "en": "en/Drawing_text_using_a_canvas", "ja": "ja/Canvas/Text" } ) }}

Source de la révision

<p>{{template.Gecko_minversion_header(1.9)}}
{{template.Firefox3()}}
À partir de <a href="fr/Firefox_3">Firefox 3</a> (<a href="fr/Gecko">Gecko</a> 1.9), l'élément <code><a href="fr/HTML/Canvas">&lt;canvas&gt;</a></code> permet de dessiner du texte à travers des API expérimentales spécifiques à Mozilla.
</p>
<h3 name="API"> API </h3>
<pre class="eval">attribute DOMString mozTextStyle; 
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
</pre>
<h3 name="Exemples"> Exemples </h3>
<p>Consultez quelques exemples <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">ici</a>, <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">ici</a> et <a class="external" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">ici</a>. Vous aurez besoin au minimum d'une version de Firefox 3a7 (pour les utilisateurs de Windows, une « nightly » postérieure à l'alpha 7).
</p>
<h3 name="Notes"> Notes </h3>
<ul><li> La police par défaut est 12pt sans serif
</li><li> Ces extensions de texte ne sont pas encore standardisées par le WHATWG
</li><li> Il n'est pas nécessaire d'avoir un contexte particulier pour les utiliser ; le contexte 2d fonctionne parfaitement
</li><li> Tous les dessins sont faits à l'aide de la transformation courante
</li><li> Implémentation dans le {{template.Bug(339553)}}
</li></ul>
<h3 name="Changement_de_la_police_courante"> Changement de la police courante </h3>
<p>L'attribut <code>mozTextStyle</code> reflète le style de texte courant. Il utilise la même syntaxe que l'indicateur <a href="fr/CSS/font">CSS font</a>.
</p><p>Exemple :
</p>
<pre class="eval">ctx.mozTextStyle = "20pt Arial"
</pre>
<h3 name="Dessin_de_texte"> Dessin de texte </h3>
<p>Le dessin est très simple. <code>mozDrawText</code> utilise le style de texte courant. La couleur de remplissage du contexte est utilisée comme couleur de texte.
</p>
<pre class="eval">ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Exemple de texte");
</pre>
<h3 name="Mesures_de_texte"> Mesures de texte </h3>
<p>Il est parfois utile de connaître la largeur d'une séquence particulière de texte (par exemple pour la centrer dans une fenêtre).
</p>
<pre class="eval">var text = "Exemple de texte";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate(len/2, 0);
ctx.mozDrawText(text);
</pre>
<h3 name="Interaction_texte.2Fchemin"> Interaction texte/chemin </h3>
<p>Si vous voulez former un chemin à partir d'un texte, ce n'est pas possible avec <code>mozDrawText</code>. Cependant, <code>mozPathText</code> ajoute les contours du texte au chemin courant.
</p>
<pre class="eval">ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Exemple de texte");
ctx.fill()
ctx.stroke()
</pre>
<p>Imaginons maintenant que vous ayez un chemin le long duque vous désirez ajouter du texte (une ligne courbe par exemple) ; c'est ici qu'intervient <code>mozTextAlongPath</code>. Contrairement aux autres fonctions de texte, <code>mozTextAlongPath</code> reçoit deux paramètres : le texte et ce qu'il faut faire avec. <code>mozTextAlongPath</code> fait une approximation du chemin sous la forme d'une série de segments de droite et place chaque glyphe le long de ce chemin aplati. Les glyphes ne sont pas redimensionnés ou transformés selon la courbe de leur ligne de base ; ils prennent l'orientation du chemin aplati au milieu du glyphe.
</p><p>Une fois que <code>mozTextAlongPath</code> sait où se trouvent les glyphes, elle examine le second paramètre pour savoir ce qu'il faut en faire. S'il vaut <code>false</code>, les glyphes seront dessinés comme <code>mozDrawText</code> le ferait. S'il vaut <code>true</code>, les glyphes seront ajoutés au chemin courant, comme <code>mozPathText</code> le ferait. On peut utiliser cela pour créer certains effets extraordinaires.
</p><p><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/Drawing_text_using_a_canvas", "ja": "ja/Canvas/Text" } ) }}
Revenir à cette révision