Liens utiles

Canvas hello world

  1. Télécharger la page de démarrage page de démarrage.
  2. Lire, comprendre et expliquer le code (en Français, en maximum 150 mots).
  3. Que se passe-t-il lorsqu'on modifie la valeur de g_unit? Modifier le code pour afficher une grille avec un pas de 1 g_unit x 1 g_unit
  4. Apporter les modifications suivantes:
    • Changer la couleur des yeux
    • Modifier la taille des pupilles.
    • Changer la forme des sourcils.
    • Ajouter un nez.
    • Ajouter une bouche construite avec des courbes.
  5. Centrer le dessin horizontalement et verticalement.

    Comment faire ?

    Par une translation t(tx, ty) du dessin. Mais, le calcul de tx et ty doit tenir compte du fait que le dessin est créé en miroir en x. Donc, tx et ty ne sont pas calculés de la même manière.

    • tx = width / 2 (où width est la largeur du canvas)
    • ty = height / 2 - h / 2 (où height est la hauteur du canvas et h la hauteur de la boite englobante du dessin)
  6. Donner un titre à votre oeuvre et afficher ce titre centré horizontalement en haut du canvas.

    Pour répondre à cette question, on peut utiliser l'attribut font du contexte graphique pour changer la police de caractère utilisée. La valeur souhaitée s'écrit en CSS. Par exemple, cg.font = "48px Calibri";

    Et pour connaitre, la largeur d'un texte écrit dans la police courante, on peut utiliser: 

        let width = cg.measureText(text_a_mesurer).width;

  7. Votre résultat devrait ressembler à quelquechose comme ça