mozilla
Vos résultats de recherche

    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

    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

     

     

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: Delapouite, BenoitL, emersion, Mgjbot
    Dernière mise à jour par : emersion,