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

INSERER DU TEXTE OU UNE IMAGE DANS LE CANVAS

Ecrire du texte dans un canvas

Pour écrire du texte dans un canvas, nous allons déjà devoir utiliser la propriété font pour définir l’apparence du texte en soi (taille, police). Cette propriété va pouvoir prendre les mêmes valeurs que la propriété CSS de même nom.

Ensuite, nous allons soit utiliser les propriété et méthode strokeStyle et strokeText() si l’on souhaite un texte creux ou fillStyle et fillText() si l’on veut au contraire un texte plein.

Les méthodes fillText() et strokeText() vont avoir besoin de trois arguments pour fonctionner :

  1. Un texte, qui sera affiché ;
  2. Un nombre, qui va correspondre à la distance entre le début du texte et le bord gauche du canvas ;
  3. Un autre nombre, qui va lui correspondre à la distance entre le début du texte et le bord supérieur du canvas.

Créons ensemble un texte creux et un texte plein afin de bien voir la différence.

Utilisation de strokeText() et de fillText() dans le canvas en JavaScript

On a pu créer un texte dans notre élément canvas en JavaScript

Essayer ce code !

Insérer une image dans le canvas

Pour insérer une image dans un canvas, on va utiliser la méthode drawImage().

Attention cependant, pour être utilisée au sein de l'élément canvas, notre image doit déjà avoir été déclarée soit en HTML avec l’élément img soit en JavaScript en créant un nouvel objet de type Image.

De plus, notre script ne fonctionnera pas si on essaie d’utiliser notre image avant que celle-ci soit complètement chargée (comme ça peut être le cas pour des images lourdes).

Pour éviter ce problème, nous allons utiliser l’évènement onload pour attendre le chargement complet de l’image avant d'effectuer une quelconque opération dessus.

On va devoir indiquer trois arguments à la méthode drawImage() : l’image utilisée, la distance par rapport au bord gauche du canvas et la distance par rapport au bord supérieur du canvas.

On va également pouvoir utiliser des arguments facultatifs permettant de redimensionner l’image utilisée pour que celle-ci ne dépasse pas du canvas.

Pour l’exemple suivant, il va vous falloir une image que l’on va mettre dans le même dossier que notre fichier HTML.

Utilisation de la méthode drawImage() pour dessiner une image dans le canvas

Notre image a été redimensionnée et s’affiche bien dans le canvas

Attention : on ne peut pas simplement passer l’adresse de l’image à la méthode drawImage(). Il faut récupérer une référence en JavaScript, avec la méthode getElementById() par exemple.

Dans l’exemple ci-dessus, notez qu’on a appliqué un display : none en CSS afin que l’image ne s’affiche pas une deuxième fois en dehors de notre l'élément canvas.

Chapitre précédent

Chapitre suivant