HTML5 et JavaScript

Introduction à la balise <canvas>

A propos de moi

Adrien Guéret
Adrien Guéret
76.34224367@gotosupinfo.com

Ce que nous allons voir

Une simple image vide

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8" />
		<title>Test avec canvas</title>
	</head>
	<body>
		<canvas id="monCanvas">
			<b>Message préventif si la balise
			n’est <ins>pas</ins> supportée.</b>
		</canvas>
	</body>
</html>
				

Si le navigateur gère <canvas>, ce code n’affichera rien !

Un élément HTML avant tout !

Il est donc possible d'appliquer du CSS dessus.
Passez par JavaScript pour modifier les dimensions du canvas !

canvas
{
	background-color: yellow;
	border: 2px solid black;
	border-radius: 10px;
}
				

La balise <canvas> ne semble pas être gérée...

L'interaction avec JavaScript

Récupérer un « contexte » via JavaScript.

				
window.onload = function()
{	
	var canvas = document.getElementById('monCanvas');
	if(canvas.getContext)
	{
		var ctx = canvas.getContext('2d');
		alert('Votre navigateur gère le canvas !');
	}
	else
	{
		alert('Oups, on va avoir un soucis...');
	}
};
				

La balise <canvas> ne semble pas être gérée...

Comme une feuille de papier...

Une fois le contexte récupéré, on peut commencer à dessiner !

Coordonnées du canvas.

Validons notre dessin


//On admet que toutes les vérifications ont été effectuées				
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(30,40);
ctx.lineTo(30,80);
ctx.lineTo(230,100);
ctx.lineTo(30,40); //Ou ctx.closePath();
ctx.stroke();
				

La balise <canvas> ne semble pas être gérée...

Validons notre dessin


//On admet que toutes les vérifications ont été effectuées				
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(30,40);
ctx.lineTo(30,80);
ctx.lineTo(230,100);
ctx.lineTo(30,40); //Ou ctx.closePath();
ctx.fill();
				

La balise <canvas> ne semble pas être gérée...

C'est mieux avec des couleurs !

Avec ctx.strokeStyle et ctx.fillStyle.


//On admet que toutes les vérifications ont été effectuées				
var ctx = canvas.getContext('2d');
//[...] On trace notre dessin
ctx.strokeStyle='red';
ctx.fillStyle='#0f0';
ctx.stroke();
ctx.fill();
				

La balise <canvas> ne semble pas être gérée...

Petit exercice

Essayez de reproduire ce motif !

La balise <canvas> ne semble pas être gérée...

Piste : utilisez ctx.beginPath(); pour commencer un autre tracé et ainsi pouvoir changer les couleurs à appliquer.

Pourquoi est-ce flou ?

Une étrange façon de gérer les coordonnées...

Le canvas se base sur les séparations de pixels !

Pourquoi est-ce flou ?

Une étrange façon de gérer les coordonnées...

La séparation "1.5" correspond ainsi au second pixel : problème résolu !

Dessiner des formes : les quadrilatères

ctx.strokeRect(x, y, width, height); et ctx.fillRect(x, y, width, height);

ctx.strokeStyle='green'; //Le carré rouge à bords verts
ctx.fillStyle='red';
ctx.fillRect(40,20,40,40);
ctx.strokeRect(40,20,40,40);
ctx.strokeStyle='blue'; //Puis le vert à bords bleus
ctx.fillStyle='green';
ctx.fillRect(10,10,40,40);
ctx.strokeRect(10,10,40,40);
ctx.strokeStyle='red'; //Et enfin le bleu à bords rouges
ctx.fillStyle='blue';
ctx.fillRect(0,40,40,40);
ctx.strokeRect(0,40,40,40);				
				

La balise <canvas> ne semble pas être gérée...

Dessiner des formes : les arcs de cercle

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);


//Formule pour convertir en radians
var radians=(Math.PI/180)*degres;
				

Exemples d'arcs de cercle

ctx.beginPath();
ctx.arc(100,100,90,(Math.PI/180)*90,(Math.PI/180)*360,false);
ctx.stroke();

ctx.beginPath();
ctx.arc(308,100,90,(Math.PI/180)*90,(Math.PI/180)*360,true);
ctx.fill();				

La balise <canvas> ne semble pas être gérée...

Second exercice

Essayez de dessiner ce smiley !

La balise <canvas> ne semble pas être gérée...

Piste : ce smiley est composé de 6 arcs de cercle.

Dynamiser nos dessins

Vers le dessin animé... Ou le jeu vidéo !

Une histoire d'événements

				
var ctx=canvas.getContext('2d'),
	figureX=70; //Position de départ du cercle

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

document.getElementById('leftButton').onclick=function()
{
	figureX-=10;
	draw();
};
	
document.getElementById('rightButton').onclick=function()
{
	figureX+=10;										
	draw();
};

function draw()
{										
	ctx.clearRect(0,0,300,105); //Reset du canvas
	//Et on redessine le cercle
	ctx.beginPath();
	ctx.arc(figureX,53,50,0,(Math.PI/180)*360,false);
	ctx.fillStyle='red';
	ctx.strokeStyle='green';
	ctx.stroke(); ctx.fill();
}
draw();
				

La balise <canvas> ne semble pas être gérée...

Gérer les animations avec setTimeout();

Il existe également requestAnimationFrame(); que nous ne verrons pas dans ce cours.


 var ctx=canvas.getContext('2d'),
   pacStart=0,
   pacEnd=360,
   pacOpen=true;

canvas.width=142;
canvas.height=105;

function draw()
{
   ctx.clearRect(0,0,142,105);
   ctx.beginPath();
   ctx.arc(70,53,50,(Math.PI/180)*pacStart,(Math.PI/180)*pacEnd,false);
   ctx.lineTo(70,53);
   ctx.closePath();
   ctx.fillStyle='yellow';
   ctx.fill();
   
   if(pacOpen && pacStart<45)
   {
      pacStart+=5;
      pacEnd-=5;
   }
   else
   {
      if(pacStart>0)
      {
         pacOpen=false;
         pacStart-=5;
         pacEnd+=5;
      }
      else
      {
         pacOpen=true;
      }
   }
   
   setTimeout(function()
   {
      draw()
   },30);
}
draw();				
				

La balise <canvas> ne semble pas être gérée...

Nous savons assez de choses pour faire un jeu !

Parcourez toutes les cases du niveau !

La balise <canvas> ne semble pas être gérée...


Réalisations de ce jeu : quelques pistes

Ceci n'était qu'une introduction !

Beaucoup de choses n'ont pas été abordées...

Liens utiles

Ce cours est terminé !

Merci à vous !

Avez-vous des questions ?

Astuce : appuyez sur F11 pour mettre en plein écran !

Par Adrien GUERET (#76342)