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 : 165994
  • Créé :
  • Créateur : Mgjbot
  • Version actuelle ? Non
  • Commentaire robot Ajoute: [[pl:Rysowanie tekstu przy użyciu canvas]] <<langbot>>

Contenu de la révision

{{ Gecko_minversion_header("1") }} {{ Fx_minversion_header("3") }} 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
<tt>textToDraw</tt>
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
<tt>textToMeasure</tt>
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
<tt>textToPath</tt>
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
<tt>textToDraw</tt>
Le texte à dessiner le long du chemin spécifié.
<tt>stroke</tt>
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


{{ languages( { "en": "en/Drawing_text_using_a_canvas", "es": "es/Dibujar_texto_usando_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }}

Source de la révision

<p>{{ Gecko_minversion_header("1") }}
{{ Fx_minversion_header("3") }}
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 id="Aper.C3.A7u_des_m.C3.A9thodes" name="Aper.C3.A7u_des_m.C3.A9thodes"> Aperçu des méthodes </h3>
<table class="standard-table"> <tbody><tr>
<td> <code>void <a href="#mozDrawText.28.29">mozDrawText</a>(in <a href="fr/DOMString">DOMString</a> textToDraw);</code>
</td></tr>
<tr>
<td> <code>float <a href="#mozMeasureText.28.29">mozMeasureText</a>(in DOMString textToMeasure);</code>
</td></tr>
<tr>
<td> <code>void <a href="#mozPathText.28.29">mozPathText</a>(in DOMString textToPath);</code>
</td></tr>
<tr>
<td> <code>void <a href="#mozTextAlongPath.28.29">mozTextAlongPath</a>(in DOMString textToDraw, in boolean stroke);</code>
</td></tr>
</tbody></table>
<h3 id="Attributs" name="Attributs"> Attributs </h3>
<table class="standard-table"> <tbody><tr>
<td class="header">Attribut
</td><td class="header">Type
</td><td class="header">Description
</td></tr> <tr>
<td><code>mozTextStyle</code>
</td><td><code><a href="fr/DOMString">DOMString</a></code>
</td><td>Le style de texte actuellement utilisé pour dessiner du texte. Cette chaîne utilise la même syntaxe que l'instruction <a href="fr/CSS/font">CSS font</a>. Pour modifier le style de texte à utiliser, changez simplement la valeur de cet attribut, comme montré dans <a href="#Changing_the_current_font">Changing the current font</a> ci-dessous. La police par défaut est 12-point sans-serif.
<p>Par exemple :
</p>
<pre class="eval">ctx.mozTextStyle = "20pt Arial";
</pre>
</td></tr></tbody></table>
<h3 id="M.C3.A9thodes" name="M.C3.A9thodes"> Méthodes </h3>
<h4 id="mozDrawText.28.29" name="mozDrawText.28.29"> mozDrawText() </h4>
<p>Dessine le texte spécifié en utilisant le style de texte indiqué par l'attribut <code>mozTextStyle</code>. La couleur de remplissage du contexte courant est utilisée comme couleur de texte.
</p>
<pre class="eval">void mozDrawText(
   in DOMString textToDraw
);

</pre>
<h6 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h6>
<dl><dt><tt>textToDraw</tt>
</dt><dd>Le texte à dessiner dans le contexte.
</dd></dl>
<h6 id="Exemple" name="Exemple">Exemple</h6>
<pre class="eval">ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Exemple de texte");
</pre>
<p>Cet exemple dessine le texte « Exemple de texte » en rouge aux coordonnées (10,50) dans le canevas.
</p>
<h4 id="mozMeasureText.28.29" name="mozMeasureText.28.29"> mozMeasureText() </h4>
<p>Renvoie la largeur en pixels que le texte spécifié occupera s'il est dessiné dans le style de texte courant.
</p>
<pre class="eval">float mozMeasureText(
  in DOMString textToMeasure
);
</pre>
<h6 id="Param.C3.A8tres_2" name="Param.C3.A8tres_2">Paramètres</h6>
<dl><dt><tt>textToMeasure</tt>
</dt><dd>La chaîne dont la largeur en pixels doit être déterminée.
</dd></dl>
<h6 id="Valeur_de_retour" name="Valeur_de_retour">Valeur de retour</h6>
<p>La largeur du texte en pixels.
</p>
<h6 id="Exemple_2" name="Exemple_2">Exemple</h6>
<pre class="eval">var text = "Exemple de texte";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate((width - len)/2, 0);
ctx.mozDrawText(text);
</pre>
<p>Cet exemple détermine la largeur de la chaîne, puis utilise cette information pour la dessiner centrée horizontalement au sein du canevas.
</p>
<h4 id="mozPathText.28.29" name="mozPathText.28.29"> mozPathText() </h4>
<p>Ajoute les traits du texte spécifié au chemin courant. Ceci permet de dessiner le texte au trait au lieu de le remplir.
</p>
<pre class="eval">void mozPathText(
  in DOMString textToPath
);
</pre>
<h6 id="Param.C3.A8tres_3" name="Param.C3.A8tres_3">Paramètres</h6>
<dl><dt><tt>textToPath</tt>
</dt><dd>Le texte dont les traits doivent être ajoutés au chemin courant.
</dd></dl>
<h6 id="Exemple_3" name="Exemple_3">Exemple</h6>
<pre class="eval">ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Exemple de texte");
ctx.fill()
ctx.stroke()
</pre>
<p>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.
</p>
<h4 id="mozTextAlongPath.28.29" name="mozTextAlongPath.28.29"> mozTextAlongPath() </h4>
<p>Ajoute (ou dessine) le texte spécifié le long du chemin courant.
</p>
<pre class="eval">void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
</pre>
<h6 id="Param.C3.A8tres_4" name="Param.C3.A8tres_4">Paramètres</h6>
<dl><dt><tt>textToDraw</tt>
</dt><dd>Le texte à dessiner le long du chemin spécifié.
</dd><dt><tt>stroke</tt>
</dt><dd>Si ce paramètre vaut <code>true</code>, le texte est dessiné le long du chemin spécifié. S'il vaut <code>false</code>, le texte est plutôt ajouté au chemin, à la suite du chemin existant.
</dd></dl>
<h6 id="Remarques" name="Remarques">Remarques</h6>
<p>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.
</p>
<h3 id="Remarques_2" name="Remarques_2"> Remarques </h3>
<ul><li> Ces extensions de texte pour canvas ne sont pas encore standardisées par le WHATWG.
</li><li> Il n'est pas nécessaire d'utiliser un contexte particulier ; le contexte 2D fonctionne très bien.
</li><li> Tous les dessins sont faits en utilisant la transformation courante.
</li><li> Consultez les {{ Bug("339553") }} si vous désirez en savoir plus sur les détails de l'implémentation.
</li></ul>
<h3 id="Exemples_suppl.C3.A9mentaires" name="Exemples_suppl.C3.A9mentaires"> Exemples supplémentaires </h3>
<ul><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">Stroking text around paths</a> (dessiner du texte autour de chemins)
</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">Drawing along a path</a> (dessiner le long d'un chemin)
</li><li> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">Animating text moving around a circle</a> (texte animé bougeant autour d'un texte.
</li></ul>
<p><br>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/Drawing_text_using_a_canvas", "es": "es/Dibujar_texto_usando_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }}
Revenir à cette révision