Apprenez à créer du texte sur plusieurs ligne et changer le background dans Canvas grâce à une nouvelle fonctionnalité mis à votre disposition pour vos développements.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer du texte multi-lignes et un background avec canvas HTML5 JavaScript
Bonjour et bienvenu sur Développement Facile.
Voici un tutoriel très cours mais qui va vous êtes très utile. Récemment pendant le développement d’un jeu sur mobile, sur le Web avec HTML 5 et la balise canvas, je me suis retrouvé, vous avez sûrement dû rencontrer ce même problème si vous développez avec la balise canvas, c’est la gestion du texte, avec la balise canvas, le texte sur plusieurs lignes. Avec canvas vous pouvez très facilement JavaScript HTML 5, afficher du texte, par contre pour l’afficher comme cela sur plusieurs lignes et en plus j’ai complexifié la chose avec un font de couleur donc un background, c’est un peu long et fastidieux bien évidemment, ça se fait avec HTML 5, mais c’est plutôt long et fastidieux, sur Internet j’ai trouvé des fonctions qui permettent de faire cela en plus ça gère, l’avantage c’est que ça gère les sauts de ligne, vous donnez une largeur, vous passez votre texte automatiquement, il sera mis dans ce bloc donc pour ceux qui ont programmé avec ActionScript, flash vous savez de quoi je parle, c’est textfield, c’est génial et j’ai rajouté la possibilité ou vous pouvez mettre des sauts de lignes, des /n en plus donc des sauts de lignes supplémentaires comme il y a ici, avec l’espacement entre les différentes lignes et là le fond de couleur donc très pratique une fonction très simple donc j’ai trouvé ça sur Internet, et puis je l’ai modifié, arrangé pour mes besoins et je suis sûr que ça va vous être très utile. Ça s’appelle textmulti, je vous ai mis le code source, le lien original et après j’ai rajouté toutes les infos dont j’avais besoin, donc la gestion des sauts de lignes, ça c’est pour la gestion des sauts de lignes manuelles, ensuite vous avez une zone de debug donc ça encadre le texte dans un rectangle tout simplement et vous récupérez la hauteur et la largeur du texte généré, donc si vous en avez besoin derrière pour faire un autre traitement c’est très pratique et ça c’est pour ajouter un background, donc très simple vous transmettez la position du background, sa couleur et le texte HTML 5, c’est aussi simple que ça, là les paramètres, vous transmettez le texte, la position du texte, la hauteur des lignes, la largeur, la largeur du texte que vous voulez, le contexte et soit vous activez ou pas le debug donc vous intégrez vos deux fichiers JavaScript tout simplement ici, et comment ça fonctionne ?
Vous utilisez une balise div qui est ici, cette balise div identifiée avec un id div, vous créez une balise canvas de la taille dont vous avez besoin tout simplement, et vous récupérez votre contexte le contexte en 2D pour écrire votre texte dans le HTML 5, vous définissez la position du texte, du background là, sa largeur, sa hauteur, l’espace entre chaque phrase, vous transmettez le background pour créer votre background avec la couleur, tous les paramètres, pareil pour ajouter le texte multi lignes, vous voyez les sauts de lignes, bienvenu, facile, automatique, bienvenu, facile, automatique deux sauts de lignes, bienvenu facile automatique, deux sauts de lignes, voilà tout simplement et à chaque fois vous positionnez le background et le texte, et donc vous mettez votre texte sur une seule ligne comme ça avec des /n si vous le souhaitez, ce n’est pas obligatoire regardez, on va le mettre, le même texte ici, mais du coup sans les sauts de ligne, donc vous allez voir le découpage automatique qui se fait, je vais juste laisser un saut de ligne ici pour le bienvenu et là je supprime les sauts de ligne et donc vous allez voir le texte va être découpé automatiquement, voilà il est découpé automatiquement. C’est une fonctionnalité sans prétention mais qui va vous êtes extrêmement utile pendant le développement de vos applications de vos jeux HTML 5 et pour cause j’en ai eu besoin lorsque j’étais en train de développer un jeu, c’est une fonction qui m’a vraiment énormément aidé, j’espère qu’elle va énormément vous aider elle est vraiment très simple, il n’y a rien de plus simple à utiliser, si vous voulez voir le code original je vous ai mis les URL donc vous pouvez soit partir de mon code, soit du code original.
Maintenant c’est à vous de jouer, utilisez cette fonction avec du texte de couleur, avec un fond de couleur, vous choisissez la couleur de texte tout ce qu’il vous faut vous avez le code source bien évidemment en téléchargement sous cette vidéo si vous avez des questions posez-les également sous ce tutoriel vidéo et si vous voulez aller beaucoup plus loin en programmation JavaScript, apprendre à créer des applications très performantes, complexes, travailler en équipe, développer deux à trois fois plus rapidement, quels outils utiliser pour être efficace en programmation, surtout pour vous simplifier la vie en programmation, vous allez également découvrir la puissance de la programmation objet, des événements, des modèles de conceptions, donc je vous explique tout ça dans la deuxième vidéo, il vous suffit de cliquer sur le lien qu’il y a juste au-dessus du cours vidéo, une image, un lien cliquable et vous serez redirigé vers le deuxième page dans la deuxième vidéo, vous allez apprendre toutes les techniques des experts en développement applicatif, que ce soit des jeux, des applications sur les mobiles, les Smartphones, les tablettes, le Web, vous allez découvrir avec HTML 5, JavaScript tout ce qu’il faut pour simplifier et accélérer votre développement sur le Web donc cliquez simplement sur la bannière au-dessus de ce cours vidéo, je vous retrouve tout de suite dans la deuxième vidéo pour tout vous expliquer à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Télécharger le code JavaScript pour faire du texte sur plusieurs ligne avec Canvas.
Retrouvez le code source commenté qui vous permettra de créer du texte sur plusieurs ligne avec l’API JavaScript Canvas.
