Tutoriel Canvas - sommaire

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 : ... <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 : // 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 : <canvas width ="800" height ="100" style= "width:100% ; height :auto ; background-image : linear-gradient(90deg, blue, skyblue )"> </canvas>

Le script : // 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('Meilleurs voeux pour 2022',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.