La balise <canvas> avec JavaScript

OpenClassrooms

Formation

À Paris

Prix sur demande

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Les meilleurs cours en Javascript

Afficher tout

Afficher tout

Description

  • Typologie

    Formation

  • Lieu

    Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Lieu

Date de début

Paris ((75) Paris)
Voir plan
7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

La balise <canvas>, introduite avec l'HTML5 est déjà utilisable sur plusieurs navigateurs tels que Mozilla Firefox, Safari, Google Chrome ou Opera. Elle permet, via moult fonctions de dessin Javascript de générer dans ce dernier, des formes, images ou textes. J'aurais donc pour but dans ce tutoriel de vous apprendre à maîtriser les bases du dessin et de l'animation avec <canvas>.

Mise en place du code minimal

Avant de commencer à animer des formes, il nous faut tout d'abord déclarer notre canvas et le lier à notre Javascript. Le code suivant est la structure minimale afin que tout projet <canvas> fonctionne correctement.

<!DOCTYPE html> <html> <head> <title>Mon projet canvas</title> <script src="canvas.js"></script> </head> <body> <canvas id="mon_canvas" width="500" height="500"> Message pour les navigateurs ne supportant pas encore canvas. </canvas> </body> </html>

Rien de bien compliqué ici, hormis la déclaration du canvas qui peut vous sembler un peu nouvelle.

  • id="mon_canvas" : Sert à identifier le <canvas>.

  • width="500" height="500" : Ce n'est pas indispensable, mais sans çà, le canvas prend la forme d'un rectangle de 100x200 pixels. Notez qu'il est tout de même possible de régler la taille plus tard via Javascript.

window.onload = function() { var canvas = document.getElementById('mon_canvas'); if(!canvas) { alert("Impossible de récupérer le canvas"); return; } var context = canvas.getContext('2d'); if(!context) { alert("Impossible de récupérer le context du canvas"); return; } //C'est ici que l'on placera tout le code servant à nos dessins. }

Un peu plus compliqué ici, mais ça reste tout de même relativement simple ;)

  • window.onload = function(){ ... } : Cela permet d'empêcher l'exécution du code avant le chargement complet de tous les éléments de la page.

  • var canvas = document.getElementById('mon_canvas'); : On récupère l'objet canvas dans la variable canvas, on vérifie ensuite que tout c'est bien passé.

  • var context = canvas.getContext('2d'); : On récupère le context du canvas. Ce sont les méthodes de cet objet que l'on utilisera pour dessiner sur le canvas.

Une fois tout ce code mis en place, vous êtes prêts à faire de beaux dessins.

Commençons à dessiner !

Comme je l'ai dit plus haut, toutes les méthodes de dessin s'utiliseront sur l'objet context. Nous allons tout d'abord voir les formes les plus simples, et nous terminerons avec les plus complexes.

Les types de formes

Avant de tracer la moindre forme, il faut savoir qu'il en existe deux types :

  • Les formes de type «fill», ce sont des formes pleines.

  • Les formes de type «stroke», ce sont les contours de la forme qui seront tracés.

Ainsi, pour identifier quel type de forme on tracera avec telle ou telle méthodes, il nous suffira de lire son préfixe, à savoir : «fill» et «stroke».

Rappels sur les coordonnées

Pour pouvoir tracer quoi que ce soit, il vous faudra comprendre comment sont positionnés les éléments sur le canvas.
Chacun des éléments composant notre dessin est positionné sur un repère imaginaire dont l'origine est le coin supérieur gauche du canvas.
Ainsi, si l'on avait un canvas de 300 pixels sur 300 pixels,

  • Le point [0, 0] se situerait en haut à gauche

  • Le point [300, 300] se situerait lui tout en bas à droite.

  • Le point [0, 300] se situerait tout en bas à gauche.

  • Etc...

Je ne pense pas que ce soit cela qui vous cause le plus de problèmes, à moins bien sûr que vous ayez raté quelques cours de 6eme ;)

Les formesLe rectangle

La méthode à utiliser, ici, est fillRect(x, y, largeur, hauteur);. Il va de soi que strokeRect(); fonctionne aussi.

Paramètre :

Description :

x

Coordonnées du coin supérieur gauche sur l'abscisse

y

Coordonnées du coin supérieur gauche sur l'ordonnée

Largeur

Largeur du rectangle, en pixels.

Hauteur

Hauteur du rectangle, en pixels.

Les lignes

J'avoue que leurs noms n'ont vraiment rien d'alléchant, pourtant, elles sont assez utiles. Vous aurez quatre méthodes à connaître pour pouvoir exploiter leur potentiel.

//On n'oublie pas de récupérer le canvas et son context. context.beginPath();//On démarre un nouveau tracé context.moveTo(0, 300);//On se déplace au coin inférieur gauche context.lineTo(150, 0); context.lineTo(300, 300); context.lineTo(0, 300); context.stroke();//On trace seulement les lignes. context.closePath();

Méthode :

Utilité :

context.beginPath();

On indique au context que l'on s'apprête à effectuer un nouveau tracé. Quant à context.closePath();, il indique au context que l'on a terminé avec ce tracé.

context.moveTo(x, y);

Par défaut, si l'on trace une ligne, elle commencera aux coord. [0, 0]. Cette fonction déplace le point de départ de chaque ligne.

context.lineTo(x, y);

Cette fonction trace une ligne en partant de la position actuelle, jusqu'aux coordonnées x, y indiquées.

context.fill();

Créer une forme pleine à partir des lignes tracées.

context.stroke();

Créer juste les traits des lignes.

Attribut :

Utilité :

Type de valeur accepté :

context.lineWidth = valeur;

Change l'épaisseur des lignes

Nombre Entiers

context.lineJoin = valeur;

Change le type de jointure entre les lignes

Chaîne de caractères suivantes : «round» (arrondi), ou «bevel» (en biseau)

Le cercle

En réalité, il n'existe pas de méthode pour créer un cercle seulement. Il faut en fait passer par la fonction permettant le tracé d'un arc de cercle.

Voilà comment on utilise la fonction «arc» (c'est son p'tit nom :) ) :

//On n'oublie pas de récupérer l'objet canvas et son context. context.beginPath(); //On démarre un nouveau tracé. context.arc(100, 100, 50, 0, Math.PI*2); //On trace la courbe délimitant notre forme context.fill(); //On utilise la méthode fill(); si l'on veut une forme pleine context.closePath();

On utilisera context.stroke(); quand on ne voudra que les contours de la forme.

Étant donné qu'elle requiert beaucoup de paramètres qui, pour la plupart vous sembleront obscurs, j'ai jugé utile de vous les présenter sous forme de tableau :

Paramètre :

Description :

x

Coordonnées du centre du cercle, sur l'abscisse

y

Coordonnées du centre du cercle, sur l'ordonnée.

Rayon

C'est tout simplement le rayon du cercle (exprimé en pixels)

Angle de départ

C'est l'angle à partir duquel on va commencer notre tracé, il est exprimé en Radians (voir le schéma ci-dessous).

Angle de fin

C'est l'angle jusqu’au quel on va effectuer notre tracé. Il est lui aussi exprimé en Radians.

«Anti-clockwise»

C'est un booléen qui, quand il vaut true inverse le sens du tracé. Ainsi, l'angle de départ sera l'angle de fin, et l'angle de fin sera, quant à lui, l'angle de départ.

Tout comme me l'a très justement signalé Amatewasu, mes explications quant aux angles n'étaient visiblement pas des plus claires, et c'est pourquoi j'ai rajouté ce petit paragraphe explicatif afin que tout le monde s'y retrouve.

Pour définir un angle, il vous suffit de multiplier à Math.PI une valeur comprise entre 0 et 2 afin de définir la position de votre angle. Notez que si le 2 n’apparaît pas sur le schéma, c'est parce qu'il est exactement à la même position que le 0, mais après une révolution complète.

Les images

Cette fonction est vraiment très puissante, elle permet via ses neuf paramètres d'afficher une image sur le <canvas> à certaines coordonnées, en la rognant ou en la déformant si nécessaire.

Sa forme la plus basique ne comporte que trois paramètres : l'objet "Image" et les coordonnées x et y :

//On n'oublie pas de récupérer l'objet canvas et son context. var mon_image = new Image(); mon_image.src = "mon_image.png"; context.drawImage(mon_image, 0, 0);

Sa forme la plus complexe prend, elle, neuf paramètres :

Paramètre :

Description :

image

On lui passe un objet "Image".

xSource

Position x dans le fichier, et à partir de laquelle on récupère l'image.

ySource

Position y dans le fichier, et à partir de laquelle on récupère l'image

SourceWidth

Largeur de l'image que l'on récupère dans le fichier

SourceHeight

Hauteur de l'image que l'on récupère dans le fichier

posX

Position x sur le canvas à partir de laquelle on va dessiner l'image.

posY

Position y sur le canvas à partir de laquelle on va dessiner l'image.

Catégories liées

  • Cours France
  • Cours Javascript
  • Cours Javascript a distance
  • Formation a distance
  • Cours Javascript (75) Paris
  • Cours (75) Paris
  • Formations OpenClassrooms

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

La balise <canvas> avec JavaScript

Prix sur demande

Les meilleurs cours en Javascript

Afficher tout

Afficher tout