Créer une zone cliquable sur un Canvas HTML5 avec JavaScript
Ce tutoriel présente une méthode pour gérer le texte sur plusieurs lignes dans un élément canvas HTML5, ainsi que la création de zones cliquables, souvent représentées par des boutons interactifs.
Gestion du Texte Multi-lignes et Fond Coloré sur Canvas
Lors du développement de jeux ou d'applications web interactives avec la balise canvas et JavaScript, la gestion du texte, en particulier sur plusieurs lignes avec un fond coloré, peut s'avérer complexe et fastidieuse. Bien que le HTML5 permette d'afficher du texte, sa mise en forme avancée sur le canvas demande des ajustements manuels. Heureusement, il existe des fonctions permettant de simplifier ce processus. Ces fonctions gèrent automatiquement les sauts de ligne en fonction d'une largeur définie, encapsulant le texte dans un bloc comme le ferait un TextField dans ActionScript (Flash). De plus, elles offrent la possibilité d'ajouter des sauts de ligne supplémentaires via le caractère /n, tout en gérant l'espacement entre les lignes et en appliquant un fond de couleur.
Une approche consiste à utiliser une balise div pour structurer le contenu et une balise canvas pour l'affichage. Après avoir récupéré le contexte 2D du canvas, il est possible de définir la position, la largeur, la hauteur du texte et de son arrière-plan, ainsi que l'espacement entre les lignes. Ces paramètres permettent de créer le fond coloré et d'afficher le texte, y compris avec des sauts de ligne automatiques ou manuels.
Par exemple, pour afficher le texte "Bienvenue, facile, automatique" avec deux sauts de ligne supplémentaires, il suffit de les spécifier. Les sauts de ligne manuels (/n) peuvent être utilisés pour contrôler précisément la mise en forme. Si les sauts de ligne ne sont pas explicitement définis, le texte sera découpé automatiquement en fonction de la largeur allouée.
Création de Boutons Interactifs sur Canvas HTML5
Ce tutoriel se concentre sur la création de boutons interactifs sur le canvas HTML5 en utilisant JavaScript. Il est divisé en trois sections principales : la familiarisation avec le code de départ, la création d'une classe pour les boutons, et l'ajout d'écouteurs d'événements pour gérer les interactions.
Pour suivre ce tutoriel, une compréhension basique de JavaScript et HTML est supposée. Le code est présenté en TypeScript pour une meilleure clarté des types de variables et de fonctions, mais le code source complet est disponible en JavaScript pur.
1. Code de Départ
Le code de départ comprend un fichier index.html basique avec une balise canvas et un lien vers un fichier JavaScript (main.js). Le fichier main.js contient la structure fondamentale d'une boucle de mise à jour du canvas.
Le code de base ressemble à ceci :
let canvas = document.getElementById('main');let c = canvas.getContext('2d');function init() { // Initialisation des variables du programme}function update() { // Recalcul et rendu des graphismes requestAnimationFrame(update);}init();update();La fonction init() sert à l'initialisation des variables, tandis que la fonction update() gère la mise à jour de la scène et le redessin à chaque image. Le code de mise à jour peut être enrichi pour dessiner un fond et la version initiale d'un bouton.
// Dessin du fondc.fillStyle = '#000000';c.fillRect(0, 0, canvas.width, canvas.height);// Dessin du boutonc.fillStyle = '#eeaa00';c.fillRect(220, 100, 200, 75);c.fillStyle = '#001122';c.textAlign = 'center';c.font = '25px arial';c.fillText('Start Game', 320, 145, 200);Cela permet d'afficher un canvas noir avec un bouton orange.
2. Création d'une Classe Button
Pour une gestion plus flexible et évolutive des boutons, il est préférable de créer une classe Button. Cette classe contiendra les propriétés qui différencient chaque bouton, telles que le texte, la couleur de fond, la couleur du texte, la position et la taille.
La classe Button peut être définie comme suit :
class Button { text: string; fillColor: string; textColor: string; x: number; y: number; width: number; height: number; constructor(text: string, fillColor: string, textColor: string) { this.text = text; this.fillColor = fillColor; this.textColor = textColor; } setPosition(x: number, y: number): void { this.x = x; this.y = y; } setSize(width: number, height: number): void { this.width = width; this.height = height; } draw(c: CanvasRenderingContext2D): void { // Dessin du corps du bouton c.fillStyle = this.fillColor; c.fillRect(this.x, this.y, this.width, this.height); // Dessin du texte du bouton c.fillStyle = this.textColor; c.textAlign = 'center'; c.textBaseline = 'middle'; c.font = '25px arial'; c.fillText(this.text, this.x + this.width / 2, this.y + this.height / 2, this.width); }}Dans la fonction init(), une instance de cette classe peut être créée et configurée :
let startGame: Button;function init(): void { startGame = new Button('Start Game', '#eeaa00', '#001122'); startGame.setPosition(canvas.width / 2 - 100, 150); startGame.setSize(200, 75); update();}Dans la boucle update(), il suffit d'appeler la méthode draw() de l'instance du bouton :
function update(): void { c.fillStyle = "#000000"; c.fillRect(0, 0, canvas.width, canvas.height); // ... autres dessins ... startGame.draw(c); requestAnimationFrame(update);}
3. Ajout d'Écouteurs d'Événements
Pour rendre les boutons interactifs, il faut gérer les événements, notamment les clics. Une approche consiste à stocker tous les boutons dans un tableau pour faciliter leur gestion.
let buttons: Button[] = [];function init(): void { let startGame = new Button('Start Game', '#eeaa00', '#001122'); startGame.setPosition(canvas.width / 2 - 100, 150); startGame.setSize(200, 75); buttons.push(startGame); // ... autres initialisations ...}Dans la fonction update(), on peut parcourir le tableau des boutons pour les dessiner :
buttons.forEach(button => button.draw(c));
Pour détecter les clics, il faut ajouter deux méthodes à la classe Button :
- inBounds(mouseX: number, mouseY: number): boolean : vérifie si les coordonnées de la souris se trouvent à l'intérieur des limites du bouton.
- onClick: () => void : une fonction à exécuter lorsque le bouton est cliqué.
class Button { // ... autres propriétés et méthodes ... inBounds(mouseX: number, mouseY: number): boolean { return !(mouseX < this.x || mouseX > this.x + this.width || mouseY < this.y || mouseY > this.y + this.height); } onClick: () => void;}L'action à effectuer lors du clic peut être assignée à la propriété onClick :
// Dans init()startGame.onClick = () => console.log('Start Game!');Enfin, un écouteur d'événement 'click' est ajouté à l'élément canvas pour intercepter les clics. Les coordonnées de la souris sont calculées par rapport au canvas, puis pour chaque bouton, on vérifie s'il a été cliqué et si une action onClick est définie. Si c'est le cas, l'action est exécutée.
canvas.addEventListener('click', (event: MouseEvent) => { let x = event.pageX - (canvas.clientLeft + canvas.offsetLeft); let y = event.pageY - (canvas.clientTop + canvas.offsetTop); buttons.forEach(b => { if (b.inBounds(x, y) && !!b.onClick) { b.onClick(); } });});
Comme exercice supplémentaire, il est possible d'implémenter des changements de couleur pour les boutons lorsqu'ils sont survolés (hover) ou cliqués.
Comment créer un bouton cliquable sur un site Web Canva
tags:
#creer #une #zone #cliquable #sur #un
Articles populaires: