Comment puis-je gérer de nombreuses images dans ma toile HTML5?

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(); } } 

MODIFIER:

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

  1. Attendre que toutes les images soient chargées en premier, puis commencer à animer avec elles, ou
  2. Commencez à animer et utilisez uniquement une image si elle est disponible.

Les deux sont décrits ci-dessous.

1. Chargement de nombreuses images et ne se déroule que lorsqu'elles sont terminées

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é.

Demo: http://jsfiddle.net/3MPrT/1/

 // 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); }); 

2. Suivre toutes les images chargées jusqu'à présent

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.

Demo: http://jsfiddle.net/3MPrT/2/

 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:

Faire pivoter les images: http://jsfiddle.net/3MPrT/7/

 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); } }