L’API Canvas de JavaScript est utilisée pour dessiner des graphiques et des animations sur une page Web. Elle offre une multitude de possibilités, allant de simples formes à des images complexes.
Voici comment utiliser l’API Canvas de JavaScript:
1. Création d’un élément Canvas :
Il faut d’abord créer un élément canvas dans le fichier HTML, comme suit :
\`\`\`html
\`\`\`
1. Accéder au contexte de dessin :
Ensuite, dans le fichier JavaScript, on peut accéder au contexte de dessin en utilisant la méthode `getContext(“2d”)`.
1. Dessiner sur le canvas : On peut maintenant commencer à dessiner sur le canvas. Par exemple, pour dessiner un carré, il faudrait utiliser le code suivant :
\`\`\`javascript ctx.fillStyle = “red”; ctx.fillRect(50, 50, 100, 100); \`\`\` Ici, `fillStyle` définit la couleur de remplissage et `fillRect(x, y, width, height)` dessine un rectangle plein aux coordonnées (x, y) de la largeur et de la hauteur spécifiées.Il est aussi possible de dessiner des lignes, des cercles, du texte et des images sur le canvas.
1. Mettre à jour le canvas : Pour animer des objets sur le canvas, il faudrait le mettre à jour régulièrement. Pour cela, on peut utiliser la méthode `requestAnimationFrame()`.
\`\`\`javascript function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // code pour dessiner des objets requestAnimationFrame(animate); } animate(); \`\`\` Ici, `clearRect(x, y, width, height)` efface une zone rectangulaire sur le canvas et `requestAnimationFrame(animate)` appelle la fonction `animate` à chaque fois que le navigateur est prêt pour une nouvelle image d’animation (généralement toutes les 16ms).Remarque : L’API Canvas de JavaScript fournit des fonctionnalités de dessin 2D à bas niveau. Pour des graphiques 3D ou des animations plus complexes, il serait préférable d’utiliser une bibliothèque de haut niveau telle que Three.js ou Babylon.js.
