Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

DESSINER DES ARCS DE CERCLE DANS LE CANVAS

Créer des arcs de cercle vides

Pour dessiner des arcs de cercle, nous allons utiliser les méthodes beginPath() pour créer un tracé et arc() pour créer l’arc de cercle en soi.

Pour créer un arc de cercle, nous allons passer cinq arguments à la méthode arc() :

  1. Un nombre correspondant au décalage du point central de l’arc de cercle par rapport au bord gauche du canvas ;
  2. Un nombre correspondant au décalage du point central de l’arc de cercle par rapport au bord supérieur du canvas ;
  3. Un nombre correspondant à la taille du rayon ;
  4. L’angle de départ, exprimé en radians ;
  5. L’angle de fin, exprimé en radians.

Pour ceux qui ne seraient pas à l’aise avec la notion de radian, retenez seulement qu’un tour de cercle correspond à 2*PI radian, et donc un demi tour de cercle à PI radian, etc.

Retenez également qu’on va tourner dans le sens des aiguilles d’une montre et que le point de départ (0*PI radian) se situe au niveau du point le plus à droite de l’arc de cercle.

Pour récupérer la valeur de PI, nous allons utiliser l’objet Math.

Pour créer un cercle complet, il suffit donc d’effectuer un tour de cadran complet, c’est-à-dire 2*PI radian.

Voyons immédiatement quelques exemples d’arcs de cercle :

Utilisation de la méthode JavaScript arc() de l’objet canvas

On utilise arc() pour créer des arcs de cercle ou des cercles

Essayer ce code !

Créer des arcs de cercle pleins

Une nouvelle fois, en utilisant la propriété fillStyle à la place de strokeStyle, nous allons créer des arcs de cercle pleins.

Attention cependant : si vous utilisez fillStyle, vous devrez également utiliser la méthode fill() à la place de la méthode stroke() pour dessiner la forme.

on crée des arcs de cercle pleins avec fillStyle et fill()

On a pu créer des arcs de cercles pleins dans le canvas en JavaScript

Essayer ce code !

Chapitre précédent

Chapitre suivant