1. Description de la balise HTML <canvas>
La balise HTML <canvas> est un élément de balisage introduit dans HTML5 qui permet de créer et de dessiner des graphiques, des images, des animations et d'autres éléments visuels directement à l'intérieur d'une page web, en utilisant des scripts JavaScript. Cette balise fournit un espace de dessin sur lequel vous pouvez contrôler chaque pixel individuellement, offrant ainsi une grande flexibilité pour créer des graphiques interactifs et dynamiques. La balise <canvas> HTML est un outil puissant qui permet aux développeurs de concevoir des expériences visuelles riches et engageantes pour les utilisateurs.
2. Syntaxe et usage de la balise HTML <canvas>
Voici quelques points clés à retenir sur la balise <canvas> :
Syntaxe
: La balise <canvas> est utilisée comme ceci :
|
1 2 |
<canvas id="nomDeLId" width="largeur" height="hauteur"> </canvas> |
où :
- nomDeLId : est un identifiant unique pour le canvas et largeur et hauteur définissent les dimensions du canvas en pixels.
- Contenu de secours : Si un navigateur ne prend pas en charge la balise <canvas>, le contenu inclus entre les balises <canvas> sera affiché. Cela permet de fournir une alternative en cas de non prise en charge.
- Contexte de rendu : Pour dessiner sur le canvas, vous avez besoin d'obtenir un contexte de rendu en utilisant JavaScript. Les deux contextes principaux sont le contexte 2D (getContext('2d')) pour le dessin 2D et le contexte WebGL (getContext('webgl') ou getContext('experimental-webgl')) pour le rendu 3D.
- Dessin et manipulation : Une fois que vous avez obtenu un contexte de rendu, vous pouvez utiliser des méthodes JavaScript pour dessiner des lignes, des formes, des images et du texte, ainsi que pour gérer les interactions utilisateur.
- Rendu dynamique : Le canvas peut être mis à jour en temps réel grâce à JavaScript, ce qui permet de créer des animations, des visualisations de données interactives et d'autres expériences visuelles engageantes.
- Événements : Vous pouvez ajouter des gestionnaires d'événements JavaScript pour capturer les interactions de l'utilisateur, comme les clics de souris, les déplacements et les touches pressées. Cela permet de rendre le contenu du canvas interactif.
- Performance : La balise <canvas> peut offrir de bonnes performances pour les animations et les graphiques complexes, car elle utilise l'accélération matérielle du GPU pour le rendu.
3. Exemples d'usages de la balise <canvas>
Voici un exemple simple d'utilisation de la balise <canvas> pour dessiner une forme géométrique basique, comme un cercle, en utilisant le contexte 2D :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- nous créons un canvas de dimensions 200x200 pixels. Ensuite, nous obtenons le contexte 2D du canvas à l'aide de getContext('2d'). Nous définissons les propriétés du cercle, telles que le centre, le rayon et la couleur de remplissage. Ensuite, nous utilisons les méthodes du contexte pour dessiner le cercle en traçant un arc avec arc(). Enfin, nous appliquons la couleur de remplissage et utilisons fill() pour remplir le cercle avec la couleur définie. --> <!DOCTYPE html> <html> <head> <title>Exemple d'usage de Canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> // Obtention du contexte 2D du canvas var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Définition des propriétés du cercle var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 50; var fillColor = 'blue'; // Dessin du cercle context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = fillColor; context.fill(); context.closePath(); </script> </body> </html> |
Lorsque vous ouvrez cette page dans un navigateur, vous verrez un cercle bleu au centre du canvas:
Younes Derfoufi
CRMEF OUJDA
1 thought on “La balise HTML <canvas>”