L'élément de HTML5 est une zone de dessin vide qui vous permet de créer des graphiques, des animations ou du contenu visuel via JavaScript. 1. Ajoutez d'abord la balise dans HTML et définissez la largeur et la hauteur; 2. Utilisez JavaScript pour obtenir l'objet Canvas via GetElementById, et appelez getContext ('2D') pour obtenir le contexte de dessin 2D; 3. Utilisez FillRect, Starekect et d'autres méthodes pour dessiner des formes; 4. Ajouter du texte via Font, FillText et d'autres méthodes, chargez et dessinez des images via l'objet d'image et les méthodes DrawImage, faites attention à l'utilisation d'Onload pour s'assurer que le chargement de l'image est terminé; 5. Ajouter des écouteurs d'événements tels que Click, Mousemove, etc. Pour réaliser l'interaction de l'utilisateur, obtenir des coordonnées de clic ou de déplacement pour réaliser des effets interactifs. La toile elle-même ne vient pas avec une logique interactive, et toutes les fonctions doivent être implémentées par elles-mêmes.

L'élément HTML5 <canvas></canvas> est une zone de dessin vide que vous pouvez manipuler avec JavaScript pour créer des graphiques, des animations ou du contenu visuel directement dans le navigateur. Il ne fait pas grand-chose de lui-même - pensez-y comme un tableau blanc numérique - mais une fois que vous ajoutez JavaScript, vous pouvez dessiner des formes, du texte, des images et même créer des visuels interactifs.

Comment configurer une toile de base

Pour utiliser l'élément <canvas></canvas> , vous devez d'abord l'ajouter à votre fichier html. Voici un exemple simple:

 <canvas id = "myCanvas" width = "500" height = "300"> </ canvas>

Cela crée une zone de toile de 500 pixels de large et 300 pixels de haut. En soi, il n'affiche rien à moins que vous n'utilisiez JavaScript pour y dessiner.

Pour commencer le dessin, vous devrez accéder à la toile via JavaScript:

 const canvas = document.getElementById (?myCanvas?);
const ctx = canvas.getContext ('2d');

Le getContext('2d') vous donne un contexte de dessin 2D, qui est le plus couramment utilisé pour les graphiques de base.

Dessin de formes simples

Une fois que vous avez le contexte de toile, vous pouvez commencer à dessiner. Par exemple, le dessin d'un rectangle est simple:

• Utilisez ctx.fillStyle = 'red'; Pour régler la couleur de remplissage.
• Puis appelez ctx.fillRect(x, y, width, height); pour dessiner le rectangle.

Voici un exemple complet:

 CTX.FillStyle = 'Blue';
CTX.Fillrect (50, 50, 100, 100);

Cela tire un carré bleu à partir de coordonnées (50, 50), 100 pixels de large et de haut.

Vous pouvez également dessiner des contours en utilisant ctx.strokeRect() ou même des parties effacées de la toile avec ctx.clearRect() .

Ajout de texte et d'images

Le texte et les images rendent le contenu en toile plus dynamique. Pour ajouter du texte:

 ctx.font = '20px arial';
ctx.fillStyle = 'Black';
ctx.fillText (?Hello Canvas!?, 10, 50);

Cela affiche le texte "Hello Canvas!" en position (10, 50) en utilisant une police Arial 20px.

Pour les images, vous pouvez charger une image à partir d'une URL et la dessiner sur la toile:

 const img = new image ();
img.src = 'image.png';
img.onload = () => {
  ctx.DrawImage (IMG, 0, 0);
};

Cela charge une image et le dessine dans le coin supérieur gauche de la toile une fois qu'il est prêt.

Gardez simplement à l'esprit: si l'image n'est pas complètement chargée avant que drawImage() ne fonctionne, elle n'appara?tra pas. C'est pourquoi nous utilisons l'événement onload .

Gestion de l'interaction utilisateur

Une caractéristique puissante de la toile est qu'elle peut répondre aux entrées de l'utilisateur comme les clics ou le mouvement de la souris.

Par exemple, pour détecter un clic sur la toile:

 canvas.addeventListener ('click', fonction (événement) {
  const rect = canvas.getBoundingClientRect ();
  const x = event.clientx - rect.left;
  const y = event.clienty - rect.top;
  Console.log ('cliquez sur:', x, y);
});

Cela vous donne les coordonnées exactes du clic, que vous pouvez ensuite utiliser pour déterminer si l'utilisateur a cliqué sur une forme ou une zone spécifique.

Vous pouvez également suivre le mouvement de la souris avec mousemove ou gérer les événements tactiles sur les appareils mobiles à l'aide touchstart et des événements similaires.

Fondamentalement, c'est tout. Canvas offre des capacités de dessin flexibles, mais toutes les interactions et la logique vous obligent à les implémenter en JS vous-même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!