Récemment, pendant le développement d’un jeu sur le Web pour mobile avec HTML 5 et la balise canvas, nous nous sommes heurtés à un problème de mise en forme du texte. Avec canvas, vous pouvez très facilement afficher du texte. Sur Internet, il existe des fonctions qui permettent de faire cela. En plus de gérer les sauts de ligne, vous pouvez fournir une largeur. Il s’agit bien de textfield, c’est génial !
Nous avons rajouté la possibilité de renseigner les sauts de lignes, des \\n en plus. Nous venons de modifier et améliorer le code disponible ici-dessous avec toutes ces fonctionnalités. wordWidth = oContext.measureText(str). Elle s’appelle addMultiLineText. Elle gère les sauts de lignes automatiques et les sauts de lignes manuels. Vous avez une zone de debug qui encadre le texte dans un rectangle. Et vous pouvez obtenir la hauteur et la largeur du texte généré. Et la fonction addTextBackground ajoute une couleur de fond sous le texte.
Une utilisation très simple : vous transmettez la position du background, sa couleur et le texte HTML 5. Voici les différents 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 non le debug. text = "Bonjour, \\nBienvenue sur Itamde. Un texte de plus en plus long à l'écran pour montrer les sauts de lignes automatiques !
text = "Bonjour, \\nBienvenue sur Itamde. Un texte de plus en plus long à l'écran pour montrer les sauts de lignes automatiques ! Vous utilisez une balise div identifiée avec un id idGameDiv. Vous créez une balise canvas de la taille dont vous avez besoin. Vous définissez la position du texte, du background, sa largeur, sa hauteur, l’espace entre chaque phrase. Puis, vous transmettez le background pour créer votre background avec la couleur. Pour tous les paramètres, c’est identique.
Pour ajouter le texte multi lignes, vous apercevez les sauts de lignes sur l’exemple ci-dessus. Vous positionnez le background et le texte. Et vous mettez votre texte sur une seule ligne ou avec des \\n si vous le souhaitez, ce n’est pas obligatoire. C’est une fonctionnalité sans prétention mais qui va vous être extrêmement utile pendant le développement de vos applications de vos jeux HTML 5. Et pour cause nous en avons eu besoin lorsque on était en train de développer un jeu, c’est une fonction qui nous a énormément aidé. Nous espérons qu’elle va aussi vous aider.
Spécifiquement pour la balise canvas, vous avez trouvé dans cet article un moyen de traiter un problème courant : le texte multiligne. Le rendu de dessins 3D n'est pas abordé. Des techniques existent pour simuler le rendu d'objets 3D en 2D en utilisant les calculs de modifications de perspectives. Le dessin s'effectue en dessinant un rectangle ou en définissant le chemin qu'effectue le "crayon".
La méthode .rect(x, y, largeur, hauteur) déplace le crayon sur le point (0,0) avant/après??? Dessine un rectangle dont l'angle supérieur gauche est spécifié par (x, y), avec les largeur et hauteur spécifiées. La méthode bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ajoute "une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par x et y, en utilisant les points de contrôle (cp1x, cp1y) et (cp2x, cp2y)".
La surface délimitée par un rectangle ou un chemin fermé peut être coloriée par, respectivement, les méthodes .fillRectangle() et .fill() selon la couleur spécifiée par la méthode .fillStyle. Imaginez que vous souhaitez réaliser le dessin de plusieurs voitures sur un parking. Le dessin des différentes voitures va donc dépendre de la position de la voiture dans le dessin. Pour éviter d'impacter le reste du dessin, il faut veiller à replacer l'origine des axes à sa position/orientation/échelle initiale. Heureusement, une autre technique existe.
Pour faciliter la mise en place de notre parking, nous pouvons considérer celui-ci comme une grille de 3x4 dont chaque case a une taille de 2*SIZE_CELL. Les voitures sont placées dans les cases (0,0), (0,1), (0,2), (1,3) et (2,3).
Techniques pratiques pour le texte multiligne sur canvas
Pour gérer les sauts de ligne automatiques et les limites de largeur, on peut mesurer le texte avec measureText et scinder la chaîne selon les espaces et les retours à la ligne. La fonction addMultiLineText permet d’afficher un texte complexe dans une zone délimitée tout en respectant les sauts de ligne explicites et les retours automatiques. Cette approche est particulièrement utile pour les textes UI, les descriptions ou les dialogues des jeux HTML5.
Le rendu peut inclure un background sous le texte afin d’améliorer la lisibilité, élément clé lorsque le texte est posé sur des arrière-plans variés. On peut aussi activer un mode debug qui encadre le texte dans un rectangle, utile pendant le développement mais discrètement retiré en production.
En pratique, vous créez une balise canvas, vous définissez la position du texte, sa largeur et la hauteur disponible, l’espacement des lignes et la couleur du background. Vous transmettez ensuite le texte et le contexte, et vous choisissez d’activer ou non le debug. Le texte peut être sur une ou plusieurs lignes selon les besoins, et les retours à la ligne manuels ou automatiques sont pris en charge.
Cet ensemble de techniques est essentiel pour le développement d’applications et jeux HTML 5, car il offre une solution simple et puissante pour l’affichage de texte multiligne sur canvas, sans dépendre de DOM ou de CSS pour le rendu du texte.
Points clés et usages courants
- Utiliser addMultiLineText pour gérer les retours à la ligne automatiques et manuels.
- Mesurer la largeur du texte avec measureText et adapter le wrapping en conséquence.
- Ajouter un background sous le texte pour améliorer la lisibilité.
- Activer un mode debug pour visualiser les zones de texte et les dimensions.
- Adapter les paramètres: position, hauteur des lignes, largeur et contexte du canvas.
La souplesse de canvas permet aussi d’imaginer des layout dynamiques, par exemple un système où les textes réagissent à la taille de l’écran ou au déplacement des éléments du jeu, tout en maintenant une présentation lisible et esthétiquement cohérente.
Tuto vidéo : Gérer les textes dans Canva
tags: #javascript #canvas #box #de #texte