HTML5 Canvas - 3.1 Dessiner Pac-Man avec des cercles

Pac-Man se dessine avec deux arcs : le corps, dont une partie n'est pas tracée pour former la bouche, et l'œil. Cette leçon reprend la méthode arc vue précédemment. Elle montre comment régler les angles pour ouvrir la bouche.

Dessiner le corps

Le corps est un arc de rayon 37. Son angle de départ et son angle de fin sont choisis pour laisser une ouverture. Les angles sont en radians : un radian correspond à l'angle formé par un arc dont la longueur est égale au rayon.

Le corps est rempli en orange. Son contour reste noir, car c'est la couleur de trait par défaut.

context.fillStyle = 'orange';
context.arc(<x>, <y>, 37, <angle-de-depart>, <angle-de-fin>);
context.fill();

Dessiner l'œil

L'œil est un petit cercle rempli en noir, dessiné avec un second arc.

Dans la démonstration, le résultat montre le contour noir, l'intérieur orange du corps et l'œil noir.

• Dessiner le corps avec un arc orange
• Choisir les angles pour laisser la bouche ouverte
• Dessiner l'œil avec un second arc noir
• Enregistrer et recharger la page

En résumé

Pac-Man se dessine avec deux arcs : le corps orange et l'œil noir. Les angles en radians définissent l'ouverture de la bouche. La méthode reprend celle du cercle vue précédemment.

Points clés

• Le corps de Pac-Man est un arc rempli en orange.
• La bouche correspond à la partie non tracée entre les deux angles.
• Plus l'écart entre les angles est grand, plus la bouche est ouverte.
• L'œil est un second arc rempli en noir.

Questions fréquentes

Pourquoi la bouche est-elle ouverte ?

L'angle de départ et l'angle de fin ne forment pas un cercle complet. L'espace entre les deux laisse voir la bouche.

Quelle est la couleur du contour de Pac-Man ?

Le contour est noir, car c'est la couleur de trait par défaut sur Canvas.

Comment agrandir ou réduire la bouche ?

Modifiez l'écart entre l'angle de départ et l'angle de fin. Plus l'écart est grand, plus la bouche est ouverte.