La Balise Canvas Avec Javascript

7/24/2019 La Balise Canvas Avec Javascript

1/14

La balise

avec JavaScriptPar Renan Gehan (rgehan)

www.openclassrooms.com

Licence Creative Commons 4 2.0Dernire mise jour le 21/09/2012
http://www.openclassrooms.com/http://www.openclassrooms.com/


2/14

Sommaire

2Sommaire ...........................................................................................................................................3La balise avec JavaScript ..................................................................................................3Mise en place du code minimal .........................................................................................................................................

4Commenons dessiner ! ................................................................................................................................................ 4Les types de formes ....................................................................................................................................................................................................4Rappels sur les coordonnes ......................................................................................................................................................................................5Les formes ..................................................................................................................................................................................................................

9Les bases de l'animation ...................................................................................................................................................9Code minimal ..............................................................................................................................................................................................................

11TP: Cration d'une balle rebondissant sur les bords du canvas .....................................................................................11Avant de commencer .................................................................................................................................................................................................12Correction ..................................................................................................................................................................................................................

13Q.C.M. .............................................................................................................................................................................14Partager .....................................................................................................................................................................................................................

2/15

http://fr.openclassrooms.com/


3/14

La balise avec JavaScript

Par Renan Gehan (rgehan)

Mise jour : 21/09/2012Difficult : Facile Dure d'tude : 2 heures

La balise, introduite avec l'HTML5est dj utilisable sur plusieurs navigateurs tels queMozilla Firefox, Safari,Google Chromeou Opera. Elle permet, via moult fonctions de dessin Javascript de gnrer dans ce dernier, des formes, imagesou textes. J'aurais donc pour but dans ce tutoriel de vous apprendre matriser les bases du des sin et de l'animation avec

.

Sommaire du tutoriel :

Mise en place du code minimalCommenons des siner !Les bases de l'animationTP: Cration d'une balle rebondissant sur les bords du canvasQ.C.M.

Mise en place du codeminimal

Avant de commencer animer des formes, il nous faut tout d'abord dclarer notre canvas et le lier notre Javascript. Le codesuivant est la structure minimale afin que tout projetfonctionne correctement.

Code : HTML - Code minimal HTML pour l'utilisation de canvas

Mon projet canvas

Message pour les navigateurs ne supportant pas encorecanvas.

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

id="mon_canvas": Sert identifier le .width="500" height="500": Ce n'est pas indispensable, mais sans , le canvas prend la forme d'un rectangle de100x200 pixels. Notez qu'il est tout de mme poss ible de rgler la taille plus tard via Javascript.

Code : JavaScript - Code minimal JavaScript pour l'utilisation de canvas

window.onload =function()

Sommaire 3/15

http://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#qcmhttp://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#ss_part_4http://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#ss_part_1http://fr.openclassrooms.com/http://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#qcmhttp://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#ss_part_4http://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#ss_part_3http://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#ss_part_2http://www.v3.siteduzero.com/tutoriel-3-533489-la-balise-canvas-avec-javascript.html?pdf=1#ss_part_1http://fr.wikipedia.org/wiki/HTML5http://www.v3.siteduzero.com/tutoriel-21-533489-la-balise-canvas-avec-javascript.htmlhttp://www.v3.siteduzero.com/membres-294-72058.html


4/14

{ varcanvas =document.getElementById('mon_canvas'); if(!canvas) { alert("Impossible de rcuprer le canvas"); return; }

varcontext =canvas.getContext('2d'); if(!context) { alert("Impossible de rcuprer le context du canvas"); return; }

//C'est ici que l'on placera tout le code servant nosdessins.}

Un peu plus compliqu ici, mais a res te tout de mme relativement simple

window.onload =function(){ ... }: Cela permet d'empcher l'excution du code avant le chargementcomplet de tous les lments de la page.varcanvas =document.getElementById('mon_canvas');: On rcupre l'objet canvas dans la variablecanvas, on vrifie ensuite que tout c'est b ien pass.varcontext =canvas.getContext('2d');: On rcupre le contextdu canvas. Ce sont les mthodes decet objet que l'on utilisera pour dess iner sur le canvas .

Une fois tout ce code mis en place, vous tes prts faire de beaux dess ins.

Commenons dessiner !

Comme je l'ai dit plus haut, toutes les mthodes de dess in s'utiliseront s ur l'objet context. Nous allons tout d'abord voir lesformes 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 p leines.

Les formes de type st roke, ce sont les contours de la forme qui seront tracs.

Ainsi, pour identifier quel type de forme on tracera avec telle ou telle mthodes, il nous suffira de lire son prfixe, savoir : fillet s troke.

Rappels sur les coordonnes

La balise avec JavaScript 4/15



5/14

Pour pouvoir tracer quoi que ce soit, il vous faudra comprendre comment s ontpositionns les lments sur le canvas .Chacun des lments composant notre dessin est positionn sur un repreimaginaire dont l'origine est le coin suprieur gauche du canvas .Ains i, si l'on avait un canvas de 300 pixels sur 300 pixels,

Le point [0, 0] se s ituerait en haut gaucheLe point [300, 300] se situerait lui tout en bas droite.Le point [0, 300] se s ituerait tout en bas gauche.Etc...

Je ne pense pas que ce soit cela qui vous cause le plus de problmes, moins bien

sr que vous ayez rat quelques cours de 6eme

Les formes

Le rectangle

La mthode utiliser, ici, est fillRect(x, y, largeur, hauteur);. Il va de s oi que strokeRect();fonctionneaussi.

Paramtre : Description :

x Coordonnes du coin s uprieur gauche s ur l'abs cis sey Coordonnes du coin s uprieur gauche s ur l'ordonne

Largeur Largeur du rectangle, en pixels.

Hauteur Hauteur du rectangle, en pixels.

Les lignes

J'avoue que leurs noms n'ont vraiment rien d 'allchant, pourtant, elles sont assez utiles. Vous aurez quatre mthodes connatrepour pouvoir exploiter leur potentiel.

Code : JavaScript - Exemple de trac de ligne avec canvas

//On n'oublie pas de rcuprer le canvas et soncontext.

context.beginPath();//On dmarre un nouveau traccontext.moveTo(0, 300);//On se dplace au coininfrieur gauchecontext.lineTo(150, 0);context.lineTo(300, 300);context.lineTo(0, 300);context.stroke();//On trace seulement leslignes.context.closePath();




6/14

Mthode : Utilit :

context.beginPath();On indique au contextque l'on s'apprte effectuer un nouveau trac. Quant context.closePath();, il indique au contextque l'on a termin avec ce trac.

context.moveTo(x,y);

Par dfaut, si l'on trace une ligne, elle commencera aux coord. [0, 0]. Cette fonction dplace lepoint de dpart de chaque ligne.

context.lineTo(x,y);

Cette fonction trace une ligne en partant de la position actuelle, jusqu'aux coordonnes x, yindiques.

context.fill(); Crer une forme pleine partir des lignes traces.

context.stroke(); Crer 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

Chane de caractres s uivantes : round (arrondi), ou

bevel (en biseau)

Le cercle

En ralit, il n'existe pas de mthode pour crer un cercle seulement. Il faut en fait passer par la fonction permettant le trac d'unarc de cercle.

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

Code : JavaScript - Trac d'un rond

//On n'oublie pas de rcuprer l'objet canvas et son context.

context.beginPath(); //On dmarre un nouveau trac.context.arc(100, 100, 50, 0, Math.PI*2); //On trace la courbedlimitant notre formecontext.fill(); //On utilise la mthode fill(); si l'on veut uneforme pleinecontext.closePath();

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

tant donn qu'elle requiert beaucoup de paramtres qui, pour la plupart vous sembleront obscurs , j'ai jug utile de vous lesprsenter sous forme de tableau :

Paramtre:

Description :

x Coordonnes du centre du cercle, sur l'abscisse

y Coordonnes du centre du cercle, sur l'ordonne.

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

Angle dedpart

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

Angle defin

C'est l'angle jusquau quel on va effectuer notre trac. Il est lui aussi exprim en Radians.




7/14

Anti-

clockwise

C'est un boolen qui, quand il vaut trueinverse le sens du trac. Ainsi, l'angle de dpart sera l'angle de fin, etl'angle de fin sera, quant lui, l'angle de dpart.

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

Pour dfinir un angle, il vous suffit de multiplier Math.PIune valeur comprise entre 0 et2 afin de dfinir la position de votre angle. Notez que si le 2 napparat pas sur le schma,c'est parce qu'il est exactement la mme position que le 0, mais aprs une rvolutioncomplte.

Les images

Cette fonction est vraiment t rs puissante, elle permet via ses neuf paramtres d'afficher une image s ur le certainescoordonnes, en la rognant ou en la dformant s i ncessaire.

Sa forme la plus bas ique ne comporte que trois paramtres : l'objet "Image" et les coordonnes x et y :

Code : JavaScript - Dess in d'une image complte


varmon_image =newImage();mon_image.src ="mon_image.png";context.drawImage(mon_image, 0, 0);

Sa forme la plus complexe prend, elle, neuf paramtres :

Paramtre : Description :

image On lui passe un objet "Image".

xSource Position x dans le fichier, et partir de laquelle on rcupre l'image.

ySource Position y dans le fichier, et partir de laquelle on rcupre l'image

SourceWidth Largeur de l'image que l'on rcupre dans le fichier

SourceHeight Hauteur de l'image que l'on rcupre dans le fichier

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

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

Width Largeur de l'image dessine sur le canvas .

Height Hauteur de l'image dessine sur le canvas .

Code : JavaScript - Dessin d'une portion d'image



http://fr.openclassrooms.com/http://www.siteduzero.com/membres-294-201420.html


8/14

varmon_image =newImage();mon_image.src ="mon_image.png";context.drawImage(mon_image, 0, 0, 10, 10, 35, 60, 15, 15);

Ici, on rcupre dans "mon_image", la portion de 10x10 pixels aux coordonnes [0, 0], et on la place sur le canvas auxcoordonnes [35, 60] pour enfin l'agrandir 15x15 pixels.

Si vous s ouhaitez en savoir plus sur la fonction drawImage, sachez que sebcap26 publi un tutoriel sur la cration d'un mini-rpg utilisant canvas et la fonction drawImage de manire pous se.

Le texte

Par chance, il existe une fonction permettant de dessiner du texte. Elle est vraiment trs simple, elle ne prend que trois paramtreset l'on peut mme choisir la police. N'est-ce pas merveilleux ?

Code : JavaScript - Dessin d'une chane de caractres


context.font ="18px Helvetica";//On passe l'attribut "font" del'objet context une simple chane de caractres compos de lataille de la police, puis de son nom.context.fillText("Hello World", 0, 30);//strokeText(); fonctionneaussi, vous vous en doutez.

Notez que j'ai effectu un retrait de 30 pixels sur l'axe des ordonnes, cela est d au fait que la mthode fillText();trace la chane de caractres en partant de s on coin infrieur droit. Ainsi, la chane se retrouve en dehors du canvas ,d'o le retrait.

Les couleurs

J'aurais peut-tre d vous en parler avant, mais j'ai pens qu'tant une notion s imple et plus divertiss ante que toutes cesfonctions compliques , il serait plus agrable de la voir la fin. Donc oui, vous n'tes pas obligs de crer vos formes en noir &

blanc, il existe un attribut de l'objet contextque l'on peut modifier afin de changer les couleurs. Le voici :

Code : JavaScript - Exemple d'application de couleur un type de formes

context.fillStyle ="#ff0000"; //Toutes les prochaines formespleines seront rouges.context.strokeStyle ="rgba(0, 0, 255, 0.5)"; //Toutes les

prochaines formes "stroke" seront bleues et semi-transparentes.

On peut assigner context.fillStyle& context.strokeStyleles valeurs suivantes :

Code couleur hexadcimalUne valeur rgb()Une valeur rgba()Le nom de la couleur en anglais

Les dgrads

Vous en voulez encore n'est-ce pas ? Vous voulez pouvoir faire des graphiques qui en jettent ? Et bien en plus de superbescouleurs, vous pouvez crer de superbes dgrads, ils fonctionnent exactement comme les couleurs, on les passe par l'attribut


http://fr.openclassrooms.com/http://www.siteduzero.com/tutoriel-3-470482-creer-un-mini-rpg-en-javascript-avec-canvas.htmlhttp://www.siteduzero.com/membres-294-130887.html


9/14

context.fillStyle.

Code : JavaScript - Trac d'un dgrad linaire simple

//On n'oublie pas de rcuprer le canvas et son context.

vardegrade =

context.createLinearGradient(0,0,300,100);//Dlimitation du dbut etde la fin du dgrad. degrade.addColorStop(0,"#FFFFFF");//Ajout d'une premirecouleur. degrade.addColorStop(1,"#000000");//Ajout de la seconde couleur.

context.fillStyle =degrade;//On passe notre dgrad aufillStyle();context.fillRect(0,0,300,300);//On trace un rectangle plein quiaura pour style le dgrad.

Dans cet exemple, nous traons sur un canvas de 300x300 pixels :

Ligne 3 : vardegrade =

context.createLinearGradient(0,0,300,100);nous dfinissons les limites du dgrad.

Ligne 4 8 : Ensuite, nous y ajoutons deux couleurs. Et nous l'appliquons au

fillStyle, et enfin crons le rectangle porteur du dgrad.

Dans la fonction addColorStop(offset, couleur);, l'ordre des offsetest important dans l'ordre descouleurs. En revanche, l'ordre des instructions, lui, n'est pas dterminant.

Les bases de l'animation

Dans tous les jeux vido dans lesquels vous pouvez distinguer un mouvement, ce que vous voyez est en ralit une suite

d'image des sine trs rapidement et qui vous donne une impress ion de fluidit. Les plus malins dentre vous ont peut-tre djune petite ide de ce que je veux dire. Non ? Tant pis, je vais vous expliquer.

Nous allons devoir mettre en p lace ce que l'on appelle une boucle de rafrachissementqui appellera une fonction de dessin quis'occupera, en fonction des valeurs qu'on lui renvoie, de tracer l'image dans le canvas.




10/14

Code minimal

Code : JavaScript - Code minimal pour une animation de base

window.onload =function(){ varcanvas =document.getElementById('mon_canvas');

if(!canvas) { alert("Impossible de rcuprer le canvas"); return; }

varcontext =canvas.getContext('2d'); if(!context) { alert("Impossible de rcuprer le context du canvas"); return; }

varmyInterval =setInterval(animate, 1000/30);

functionanimate() { //C'est ici que toutes les manipulations sur le canvas seferont. }}

Mais que se pas se-t-il la ligne 17 ?

Ce simple myInterval =setInterval(animate, 1000/30);appelle la fonction animate()trente fois parseconde. C'est la frquence approximative partir de laquelle l'il humain discerne un mouvement parfaitement fluide.

Nous allons donc devoir placer nos fonctions de dess in l'intrieur de cette fonction animate(). Nous allons faire un exemplesimple, celui d'un rectangle s'agrandissant jusqu' faire la taille de notre canvaspuis rtrciss ant, et ainsi de suite.

Code : JavaScript - Animation de base d'un carr

window.onload =function(){ //On n'oublie pas de rcuprer le canvas et son context.

canvas.width =300; canvas.height =300;

varmyInterval =setInterval(animate, 1000/30); //Notre bouclede rafrachissement.

//On dfini quelques variables vartailleMini =10; vartailleMax =canvas.width;//Tant que notre canvas restecarr, l'agrandissement peut-tre gal un des cts. vartailleActuelle =tailleMini+1;//On initialise la tailleactuelle au minimum de ce quoi elle peut correspondre, puis on yadditionne 1 afin de ne pas boucler indfiniment sur les phasesd'agrandissement, rtrcissement.

varxPos =0; varyPos =0; varvitesse =1;//La valeur 1 signifie que l'on augmentera lataille du carr, tandis que -1 correspondra une rduction.

functionanimate()




11/14

{context.clearRect(0, 0, canvas.width, canvas.height);//Cettefonction permet de rinitialiser notre canvas. Plus rien n'y estaffich.

//On commence par calculer la position laquelle on doitplacer le carr, pour qu'il reste bien au centre du canvas. xPos =(canvas.width/2)-(tailleActuelle/2);

yPos =xPos;//Notre canvas tant un carr, pas besoin derecalculer le milieu de l'ordonne : c'est le mme que l'abscisse.

//On a tout ce qu'il nous faut pour tracer notre carr : context.fillRect(xPos, yPos, tailleActuelle,tailleActuelle);

//On fait les tests pour savoir si l'on va devoir agrandirou rtrcir notre carr. if(tailleActuelle >=tailleMax ||tailleActuelle


12/14

Un canvas non carr (pour que la balle ne suive pas toujours la mme trajectoire).Une belle balle cre grce la fonction arc.La boucle de rafrachissement permettant le mouvement de la balle.Un systme de condition grant les rebonds en cas de collisions avec un des rebords. (2 conditions suffisent, si voustes malins , et je n'en doute pas ).

A quoi devrez-vous faire attention ?

Vous devrez faire attention ce que la balle ne dpas se jamais les bords du canvas. A vous de faire les calculsncessaires pour que les bonnes coordonnes soient prises en compte en fonction du bord touch par la balle.

Ne pas oublier de rinitialiser le canvas via clearRect().

Encore une petite chose : L'important n'est pas que vous russissiez l'exercice, mme si cela prouverait que vous avez bien toutsuivi. L'important est que vous cherchiez par vous mme les solutions chacune des problmatiques. Il ne vous serai donc

d'aucun intrt d'aller voir la correction de suite.

Bon courage !

Correction

Pour ceux qui n'auraient pas russi, ou pour ceux qui cherchent amliorer leur code, voici la correction :Par souci de gain de p lace, j'ai condens tout le code en un s eul fichier, mais le fonctionnement est le mme.

Code : HTML

Votre navigateur ne supporte pas canvas.

window.onload =function(){ varcanvas =document.getElementById("myCanvas");

if(!canvas) { alert("Impossible de rcuprer le canvas"); return; }

varcontext =canvas.getContext("2d"); if(!context) { alert("Impossible de rcuprer le context"); return; }

vardiametreBalle =20;

varposX =1+diametreBalle/2;

varposY =1+diametreBalle/2; varvitesseX =3; varvitesseY =3;




13/14

varmyInterval =setInterval(animate, 1000/30);

functionanimate() { context.clearRect(0, 0, canvas.width, canvas.height);

//Trac de la balle context.beginPath();

context.arc(posX, posY, diametreBalle/2, 0, Math.PI*2); context.fill();

//On va vrifier si la balle toucher l'un des bords ducanvas. if(posX+diametreBalle/2>=canvas.width ||posX =canvas.width ||posX


14/14

Connectez-vousInscrivez-vousParmi toutes ces propos itions , laquelle permet l'excution de s on contenu une fois que la page est charge ?

window.onLoad =function(){ ... }

window.onload(function(){ ... });

window.onload =function(){ ... }

window.onLoad(function(){ ... });

Correction !

Statistiques de rponses au Q CM

Avec tout ce que l'on a vu, je pense que vous devez tre largement capable de crer, seul, de trs belles choses.Bon courage.

Partager

http://www.v3.siteduzero.com/tutoriel-rss/533489.xmlhttp://www.v3.siteduzero.com/tutoriel-15-533489.htmlhttp://www.v3.siteduzero.com/inscriptionhttp://www.v3.siteduzero.com/connexion

Documents

La Balise Canvas Avec Javascript