Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 Un panorama défilant en boucle | | Coucou Un panorama défilant en boucle Partie Html: - Code:
-
<canvas id="canvas" width="800" height="200"></canvas> JS: - Code:
-
var img = new Image();
// Variables utilisateur - les personnaliser pour changer l'image qui défile, ses // directions, et la vitesse.
img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'; var CanvasXSize = 800; var CanvasYSize = 200; var speed = 30; // plus elle est basse, plus c'est rapide var scale = 1.05; var y = -4.5; // décalage vertical
// Programme principal
var dx = 0.75; var imgW; var imgH; var x = 0; var clearX; var clearY; var ctx;
img.onload = function() { imgW = img.width * scale; imgH = img.height * scale; if (imgW > CanvasXSize) { // image plus grande que le canvas x = CanvasXSize - imgW; } if (imgW > CanvasXSize) { // largeur de l'image plus grande que le canvas clearX = imgW; } else { clearX = CanvasXSize; } if (imgH > CanvasYSize) { // hauteur de l'image plus grande que le canvas clearY = imgH; } else { clearY = CanvasYSize; } // récupérer le contexte du canvas ctx = document.getElementById('canvas').getContext('2d'); // définir le taux de rafraichissement return setInterval(draw, speed); }
function draw() { ctx.clearRect(0, 0, clearX, clearY); // clear the canvas // si image est <= taille du canvas if (imgW <= CanvasXSize) { // réinitialise, repart du début if (x > CanvasXSize) { x = -imgW + x; } // dessine image1 supplémentaire if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); } // dessine image2 supplémentaire if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); } }
// image est > taille du canvas else { // réinitialise, repeart du début if (x > (CanvasXSize)) { x = CanvasXSize - imgW; } // dessine image supplémentaire if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); } } // dessine image ctx.drawImage(img, x, y,imgW, imgH); // quantité à déplacer x += dx; }
Dernière édition par Ptite_Perle le Ven 8 Oct 2021 - 17:52, édité 1 fois |
| |
CathMembre Messages : 43 Venue : 23/11/2017 Je suis : Age : 59 Je vie à : Loin Humeur : Bonne Mes Points : 46817 Re: Un panorama défilant en boucle | | |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 Re: Un panorama défilant en boucle | | De rien Cath |
| |
Kira34
Bravo pour ton badge
Bravo pour ton badge, pour te remercier de ta participation au concours
Présence
Merci pour ta présence sur le forum.
MembreActif Messages : 326 Venue : 17/07/2020 Je suis : Age : 63 Je vie à : Languedoc Humeur : Bonne Mes Points : 27777 Re: Un panorama défilant en boucle | | |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 Re: Un panorama défilant en boucle | | Avec plaisir Kira34 Bisous |
| |