Tutoriel Canvas - sommaire

Des animations avec effet 3D

Un canevas est un contexte 2D mais en ombrant le canevas et les formes on donne l'illusion de la 3D.

Dans ce chapitre je vais vous montrer aussi des outils modernes pour réaliser le script d'animation :
• appeler la fonction d'animation avec la méthode window.requestAnimationFrame()
• simplifier la programmation en recourant à la POO

Plutôt qu'utiliser setInterval() pour appeler régulièremenent la fonction d'animation, je vais utiliser dans ce chapitre une nouvelle méthode window.requestAnimationFrame()
Cette nouvelle méthode appelle la fonction 60 fois par seconde donc rend les animations très fluides.
Attention, il faut deux instructions window.requestAnimationFrame() : une en dehors de la fonction (premier appel) et une autre dans la fonction (récursivité).
window.cancelAnimationFrame() permet de mettre fin à l'animation.

Une bannière animée avec Canvas

Il n'est pas possible de mettre fin à l'animation.

Le code correspondant

Code HTML : <canvas width ="800" height ="100" style= "width:100% ; background: linear-gradient(90deg, blue, skyblue ) ; box-shadow : 5px 5px 5px grey;"> </canvas>

La balise Canvas étant un élément HTML, on peut lui appliquer un dégradé CSS.

Le script :

function f1()
{
	var canevas = document.querySelectorAll('canvas')[0]; 
	var contexte = canevas.getContext('2d');
	var X = canevas.width ; 	
	var Y = canevas.height; 
	contexte.shadowColor = 'grey';
	contexte.shadowOffsetX = 6 ; 
	contexte.shadowOffsetY = 6 ; 
	contexte.shadowBlur = 6 ; 
	contexte.textAlign ='left'; 
	contexte.fillStyle = 'olive'; 
	contexte.textBaseline = 'middle'; 
	contexte.lineWidth = 3; 
	contexte.font = " bold italic 60px arial" ; 
	var x = X ;
	window.requestAnimationFrame(deplacement);
	function deplacement()
	{
		contexte.clearRect(0,0,X,Y); 
		x = x-2 ; 
		if(x <-750) x = X ; 
		contexte.fillText('Meilleurs voeux pour 2022',x,50); 
		window.requestAnimationFrame(deplacement);
	} // fin déplacement
} // fin f1
f1(); // appel f1

Déplacement automatiquement une boule sur un billard

Il est possible de mettre fin à l'animation.

Le canevas (un billard)

La boule se déplace sur le billard ; le billard et la boule sont ombrées pour donner un effet 3D.
Le rebond de la boule est parfaitement géré par le script.

Cliquez dans le billard pour mettre fin à l'animation automatique de la boule rouge

Le code correspondant

Le code HTML : <canvas width ="600" height ="300" style ="width :80% ; height : auto ; background : lime ; border : 5px solid maroon; box-shadow : 5px 5px 5px grey; border-radius : 10px;" > </canvas>

La balise CANVAS est un élément HTML, on peut donc lui appliquer la propriété CSS box-shadow.

Le script

function f2()
{
	var canevas = document.querySelectorAll("canvas")[1]; 	
	var contexte = canevas.getContext("2d");
	var stop;
	
	var X =canevas.width; 	
	var Y =canevas.height;
	contexte.shadowColor = 'grey';
	contexte.shadowOffsetX = 3 ; 
	contexte.shadowOffsetY = 3 ; 
	contexte.shadowBlur = 3 ; 
	var rayon =9;		
	var x = X/2;     var y = Y/2;  
    var sensX = 2;    var sensY = 1;
	contexte.fillStyle	 ='red'; 
    stop = window.requestAnimationFrame(boule);
    function boule()
    {
		contexte.clearRect(0, 0, X, Y); 
		contexte.beginPath();
		contexte.arc(x, y,rayon, 0, Math.PI*2);
		contexte.fill();
		if(x > X-rayon || x <= rayon)     {sensX =sensX * -1 ;}
		if(y >= Y-rayon || y <= rayon)    {sensY =sensY * -1 ;}
		x = x + sensX ; 	   
		y = y + sensY ; 
		stop = window.requestAnimationFrame(boule);
    } // fin boule
	canevas.onclick = function() {window.cancelAnimationFrame(stop);}

} // fin fonction f2
f2() ; // appel f2

Les étapes de la fonction d'animation boule :
• vider le canevas
• dessiner la boule (rond rouge ombré)
• si la boule touche les bords gauche ou droit la variable sensX change de signe
• si la boule touche les bords bas ou haut la variable sensY change de signe
• calcul des nouvelles coordonnées de la boule

La fonction d'animation est appelée 60 fois par seconde avec window.requestAnimationFrame()

Si vous trouvez que la boule ne se déplace pas assez vite il suffit de modifier les valeurs des variables sensX, sensY OU vous réduisez les valeurs du repère cartésien défini dans le canevas.

Canvas et POO

Le document HTML

Ce document contient une "toile".
Cliquez dans le canevas pour que la balle apparaisse et se déplace.
Placez la souris en dehors du canevas, la boule s'arrête.

Le code du document

Le code HTML

Le script

Le script est orienté objet.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var X = canvas.width ; 	
var Y = canvas.height; 
var stop ; 

// définition objet balle via la notation JSON
var balle = 
{
  x: 80,
  y: 100,
  vx: 4,
  vy: 2,
  rayon: 20,
  color: "red",
  dessin: function () 
  {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.rayon, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }, 
}; // fin définition objet balle

function deplacer() 
{
  ctx.fillStyle = "rgba(255,255,255,0.3)";
  ctx.fillRect(0,0,X,Y);
  balle.dessin();
  balle.x += balle.vx;
  balle.y += balle.vy;
  // gestion des rebonds
  if(balle.x > X-20 || balle.x <= 20)     {balle.vx = -balle.vx}
  if(balle.y >= Y-20 || balle.y <= 20)    {balle.vy = -balle.vy}
  stop = window.requestAnimationFrame(deplacer);
} // fin dessiner

canvas.onclick = function() {window.requestAnimationFrame(deplacer);}
canvas.onmouseout = function() {window.cancelAnimationFrame(stop);}

Analyse du script

Programmation orientée objet

J'utilise la POO dans ce script.
Je crée un objet "balle" via la notation JSON.
La POO en JavaScript

Effet de trainée

Jusqu'à présent j'ai utilisé la méthode clearRect() pour effacer le contenu antérieur du canevas.
En remplaçant par la méthode fillRect() et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.
Les deux instructions pour créer cet effet :

ctx.fillStyle = "rgba(255,255,255,0.3)";
ctx.fillRect(0,0,X,Y);