Deux animations avec effet 3D
Un canevas est un contexte 2D mais en ombrant les formes on peut donner un effet 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 : effet 3D.
Le code correspondant
Le code HTML :
<![CDATA[
...
<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.
Le script :
<![CDATA[
// 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
}
...
]]>
Par contre pour ombrer une forme du canevas il faut utiliser les quatre propriétés "shadow".
Les étapes de la fonction 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 boule est appelée toutes les 50 millisecondes donc 20 fois par seconde (1000/50).
Une bannière animée avec Canvas
Une bonne révision sur toutes les méthodes pour dessiner du texte dans un canevas.
La bannière
Le code correspondant
Code HTML :
<![CDATA[
<canvas width ="800" height ="100"
style= "width:100% ; height :auto ; background-image : linear-gradient(90deg, blue, skyblue )">
</canvas>
]]>
Le script :
<![CDATA[
// script deuxième canevas
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 ;
setInterval(deplacement,10) ;
function deplacement()
{
contexte.clearRect(0,0,X2,Y2);
x = x-2 ;
if(x <-750) x = X2 ;
contexte.fillText('Bonne année 2021',x,50);
}
}
banniere(); // appel de la fonction
]]>
Pour pouvoir utilise les mêmes noms de variables que dans le premier script, je crée une fonction dans celui-ci.