Deux animations avec effet 3D

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

Déplacement automatiquement une boule sur un billard

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.

Le code correspondant

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

La balise CANVAS est un élément HTML, on peut donc lui appliquer la propriété CSS box-shadow. Par contre pour ombrer une forme du canevas il faut utiliser les quatre propriétés "shadow" de l'API canvas : voir script.

Le script

// canevas référence le premier élément "canvas" de la page
  	var X =canevas.width; 
	var Y =canevas.height;
	contexte.shadowColor = 'grey';
	contexte.shadowOffsetX = 3 ; 
	contexte.shadowOffsetY = 3 ; 
	contexte.shadowBlur = 3 ; 
	var rayon =6;	
	var x = X/2;     var y = Y/2; 
	// coordonnées initiales de la boule de billard 
    var sensX = 3;    var sensY = 3;
	contexte.fillStyle	 ='red'; 
    setInterval(boule,50); 
	// toutes les 50 millisecondes ou 20 fois par seconde (1000/50)

 function boule()
 {
    contexte.clearRect(0, 0, X, Y); 
	contexte.beginPath();
	contexte.arc(x, y,rayon, 0, Math.PI*2); 
	// définir une boule
	contexte.fill(); // dessiner la boule
    if(x > X-rayon || x <= rayon)
	//Si boule touche le bord gauche ou droit alors sensX change de signe
        {sensX =sensX * -1 ;         }
    if(y >= Y-rayon || y <= rayon)
	//Si boule touche le bord haut ou bas alors sensY change de signe
        {sensY =sensY * -1 ;         }
    x = x + sensX ; 	   y = y + sensY ; 
	// nouvelles coordonnées de la boule
} 
	...

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 (x = x + sensX ; y = y + sensY) sachant que les variables sensX & sensY valent 3 ou -3.

La fonction d'animation est appelée toutes les 50 millisecondes donc 20 fois par seconde (1000/50).

Une bannière animée avec Canvas

Le code correspondant

Code HTML : <canvas width ="800" height ="100" style= "width:100% ; height :auto ; background-image : linear-gradient(90deg, blue, skyblue )"> </canvas>

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

Le script : function banniere() { var canevas = document.querySelectorAll('canvas')[1]; var contexte = canevas.getContext('2d'); // canevas référence la balise CANVAS var X2 = canevas.width ; var Y2 = 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 = X2 ; var stop = setInterval(deplacement,10) ; function deplacement() { contexte.clearRect(0,0,X2,Y2); x = x-2 ; if(x <-750) x = X2 ; contexte.fillText('Meilleurs voeux pour 2022',x,50); } // fin fonction deplacement } // fin fonction banniere banniere(); // appel de la fonction

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

Animations et jeux avec Canvas

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Deux animations avec effet 3D

Déplacement automatiquement une boule sur un billard

Le canevas (un billard)

Le code correspondant

Le script

Une bannière animée avec Canvas

Le code correspondant