Je suis très nouveau sur Html5 canvas et Javascript. J'essaie ceci:
function animate() { var image1 = new Image(); image.src = /path var image2 = new Image(); image2.src = /path for(;;) { //change value of x and y so that it looks like moving context.beginPath(); context.drawImage(<image>, x, y ); context.closePath(); context.fill(); } }
Et j'appelle la fonction animate
chaque 33 ms:
if (playAnimation) { // Run the animation loop again in 33 milliseconds setTimeout(animate, 33); };
Si je suive la réponse donnée ici, j'ai l'image frappée et elle ne bouge plus.
Mise à jour : sur la base de nouvelles informations dans la question, votre problème (retraité) est que vous souhaitez soit
Les deux sont décrits ci-dessous.
Avec cette technique, nous chargeons toutes les images immédiatement et lorsque la dernière a été chargée, nous exécutons un rappel personnalisé.
// Load images and run the whenLoaded callback when all have loaded; // The callback is passed an array of loaded Image objects. function loadImages(paths,whenLoaded){ var imgs=[]; paths.forEach(function(path){ var img = new Image; img.onload = function(){ imgs.push(img); if (imgs.length==paths.length) whenLoaded(imgs); } img.src = path; }); } var imagePaths = [...]; // array of strings loadImages(imagePaths,function(loadedImages){ setInterval(function(){ animateInCircle(loadedImages) }, 30); });
Avec cette technique, nous commençons à animer immédiatement, mais ne dessins que des images une fois qu'elles sont chargées. Notre cercle change dynamiquement la dimension en fonction du nombre d'images chargées jusqu'à présent.
var imagePaths = [...]; // array of strings var loadedImages = []; // array of Image objects loaded so far imagePaths.forEach(function(path){ // When an image has loaded, add it to the array of loaded images var img = new Image; img.onload = function(){ loadedImages.push(img); } img.src = path; }); setInterval(function(){ // Only animate the images loaded so far animateInCircle(loadedImages); }, 100);
Et, si vous vouliez que les images tournent en cercle plutôt que de se déplacer en cercle:
ctx.save(); ctx.translate(cx,cy); // Center of circle ctx.rotate( (angleOffset+(new Date)/3000) % Math.TAU ); ctx.translate(radius-img.width/2,-img.height/2); ctx.drawImage(img,0,0); ctx.restore();
La réponse d'origine suit.
En général, vous devez attendre que chaque chargement de l'image soit terminé:
function animate(){ var img1 = new Image; img1.onload = function(){ context.drawImage(img1,x1,y1); }; img1.src = "/path"; var img2 = new Image; img2.onload = function(){ context.drawImage(img2,x2,y2); }; img2.src = "/path"; }
Vous voudrez peut-être que ce code soit plus DRY en utilisant un objet:
var imgLocs = { "/path1" : { x:17, y:42 }, "/path2" : { x:99, y:131 }, // as many as you want }; function animate(){ for (var path in imgLocs){ (function(imgPath){ var xy = imgLocs[imgPath]; var img = new Image; img.onload = function(){ context.drawImage( img, xy.x, xy.y ); } img.src = imgPath; })(path); } }