Objectifs
Voici les connaissances abordées dans ce cours.
- Apprendre à dessiner des formes basiques dans un
<canvas> - Appréhender des notions de base en programmation : fonctions et boucles
Mots-clefs
Brief
Votre travail sur ce sujet se fera en deux étapes. Vous allez tout d’abord compléter trois exercices afin de vous familiariser avec la création de formes basiques (rectangle, cercle, triangle) au sein d’un <canvas>. Vous utiliserez ensuite ces trois formes pour créer votre propre composition.
Exercice 1 : Le rectangle
Reproduire le visuel suivant en se basant sur l’exemple fourni.
Exemple : dessiner un rectangle rouge
context.fillStyle = "red"
context.fillRect(4.5, 7, 12, 7)Documentation
Définir la couleur de remplissage
context.fillStyle = "couleur"
Dessiner un rectangle
context.fillRect(x, y, largeur, hauteur)
| Paramètre | Description |
|---|---|
| x | Position sur l’axe x du coin supérieur gauche du rectangle |
| y | Position sur l’axe y du coin supérieur gauche du rectangle |
| largeur | Largeur du rectangle |
| hauteur | Hauteur du rectangle |
Exercice 2 : Le cercle
Reproduire le visuel suivant en se basant sur l’exemple fourni.
Exemple : dessiner un cercle avec une bordure verte
context.strokeStyle = "green"
context.lineWidth = 0.5
context.beginPath()
context.arc(10.5, 10.5, 5, 0, Math.PI * 2)
context.stroke()Documentation
Définir la couleur de la bordure
context.strokeStyle = "couleur"
Définir la largeur de la bordure
context.lineWidth = largeurBordure
Commencer le tracé
context.beginPath()
Dessiner un cercle
context.arc(x, y, rayon, angleDebut, angleFin)
| Paramètre | Description |
|---|---|
| x | Position sur l’axe x du centre de l’arc de cercle |
| y | Position sur l’axe y du centre de l’arc de cercle |
| rayon | Rayon de l’arc de cercle |
| angleDebut | Angle depuis lequel l’arc de cercle commence, mesuré en radians dans le sens des aiguilles d’une montre |
| angleFin | Angle auquel l’arc de cercle s'arrête, mesuré en radians dans le sens des aiguilles d’une montre |
Fermer le tracé
context.stroke()
Exercice 3 : Le triangle
Reproduire le visuel suivant en se basant sur l’exemple fourni.
Exemple : dessiner un triangle bleu
context.fillStyle = "blue"
context.beginPath()
context.moveTo(6.5, 8)
context.lineTo(14.5, 8)
context.lineTo(10.5, 15)
context.fill()Documentation
Déplacer le curseur aux coordonnées x et y données
context.moveTo(x, y)
| Paramètre | Description |
|---|---|
| x | Coordonnée du curseur sur l’axe x |
| y | Coordonnée du curseur sur l’axe y |
Tracer un segment depuis la dernière position du curseur jusqu’aux coordonnées x et y données
context.lineTo(x, y)
| Paramètre | Description |
|---|---|
| x | Coordonnée du point sur l’axe x |
| y | Coordonnée du point sur l’axe y |
Fermer le tracé
context.fill()
Notation
| /20 | |
|---|---|
| /6 | Exercices 1, 2 et 3 : concordance entre le visuel modèle et le rendu |
| /6 | Qualité et équilibre de la composition finale |
| /4 | Composition mettant en scène des rectangles, des cercles et des triangles |
| /4 | Utilisation de formes avec remplissage (fill) et avec bordure (stroke) |