Déplacement automatique d'une boule - effet 3D

Le canevas

Redimensionnez la fenêtre et à chaque fois "actualisez".
Un message vous indique que les dimensions du canevas sont 300 par 150 ...

La boule se déplace sur le billard ; la boule a une ombre (effet 3D).

Le code de la page

Le CSS

... @media screen and (min-width: 900px) {canvas {width : 600px ; height : 300px; }} @media screen and (max-width: 899px) {canvas {width : 300px ; height : 150px; }} ...

Le canevas fait 600 par 300 ou 300 par 150 selon la largeur de l'écran.

Le code HTML

... <canvas style ='background : lime ; border : 5px solid maroon; box-shadow : 5px 5px 5px grey;' ></canvas> ...

Le canevas (billard) est mis en forme avec une règle de style en ligne.
La balise Canvas n'a pas d'attributs width, height puisque c'est le CSS qui fixe les dimensions

	...
	// canevas référence la balise canvas
  	var X =canevas.width; 
	var Y =canevas.height;
	alert("dimensions canevas : "+ X + " " + Y + " "+ typeof(X)) ;
	var rayon =6;	var ombre = 3;
	var x = X/2;     var y = Y/2; // coordonnées initiales de la boule de billard 
    var sensX = 3;    var sensY = 3;
    setInterval(animate,50); // toutes les 50 millisecondes
    function animate()
    {
        contexte.clearRect(0, 0, X, Y);  
		contexte.beginPath(); 
		contexte.fillStyle	= 'grey'; 
        contexte.arc(x+ombre, y+ombre,rayon, 0, Math.PI*2);
        contexte.fill();
		contexte.beginPath(); 
		contexte.fillStyle	 ='red'; 
		contexte.arc(x, y,rayon, 0, Math.PI*2);
		contexte.fill();
        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
    } // fin fonction animate
	...

Il y a dans le script j'ai inséré une instruction alert() qui retourne "dimensions canevas : 300 150 number" quelque soient les dimensions réelles du canevas (600 sur 300 ou 300 par 150).
En effet les dimensions du canevas sont définies ici via le CSS et non pas via les attributs width et height de la balise CANVAS.
Donc ce cas les instructions canevas.width et canevas.height retournent toujours : 300 et 150.
Mais c'est pas génant : on crée ainsi un système de coordonnées indépendant de la taille réelle du canevas ! L'équivalent du viewBox en SVG ...


Retour menu