IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Mettre le texte d'une DIV dans une image CANVAS


Sujet :

JavaScript

  1. #1
    Membre régulier
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2002
    Messages
    213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Belgique

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2002
    Messages : 213
    Points : 102
    Points
    102
    Par défaut Mettre le texte d'une DIV dans une image CANVAS
    Bonjour à tous,

    Je souhaitera savoir s'il est possible de générer un texte, mise en forme via jquery et l'intégrer ensuite dans une "image" canvas ? (si oui, comment)
    En gros pour que mon texte fasse partie de l'image et non pas simplement une superposition.

    Où est-il possible de faire en javascript un cercle (çà c'est déjà fait) et ajouter du texte suivant ce cercle (bonne rotation des caractères, bon espacements, ...) dans un canvas, pour en faire une image ?

    D'avance merci.


    Bonne continuation.

    D.

  2. #2
    Membre éclairé
    Avatar de LearningBoy
    Homme Profil pro
    Ingénieur Logiciel - Fullstack JavaScript
    Inscrit en
    Août 2017
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur Logiciel - Fullstack JavaScript
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2017
    Messages : 73
    Points : 664
    Points
    664
    Par défaut Réponse
    Bonjour tripper.dim,

    Il est possible d'écrire un texte dans un canvas grâce à la méthode fillText, et même de mettre en forme ce texte.

    Voici un exemple qui écrit "Hello, world !" en taille 30px, et avec la police Arial :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",10,50);
    J'espère que cet exemple vous aideras.

    Simon,

    auteur sur AwesomeAngular.
    Découvrez "Angular, ECMAScript 6 et TypeScript" pour vos futurs développements web...

  3. #3
    Membre régulier
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2002
    Messages
    213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Belgique

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2002
    Messages : 213
    Points : 102
    Points
    102
    Par défaut
    Merci LearningBoy.

    J'ai utilisé vos méthodes, mais c'est un peu compliqué pour faire le suivi d'un arc de cercle.

    Je essayer la création de svg, qui me donne un meilleur résultat à l'aperçu et à l'impression. Mais c'est un peu plus compliqué à gérer certaines formes. Reste plus qu'à faire des procédures pour gérer tout cela.

    Encore merci.


    Cordialement,
    D.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Recopier texte taper dans une <div> dans une autre en temps réel
    Par 6nawak dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 31/12/2013, 18h02
  2. Positionné une div dans une div
    Par hunyka dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 24/04/2012, 09h29
  3. Aligner des divs dans une div sur UNE ligne
    Par identifiant_bidon dans le forum Balisage (X)HTML et validation W3C
    Réponses: 17
    Dernier message: 07/09/2011, 19h06
  4. Incorporer une div dans une div
    Par solorac dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 21/07/2008, 15h21
  5. Recherche une valeur d'une cellule dans une colonne d'une autre feuille
    Par kourria dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 21/06/2007, 14h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo