En javascript, vous pouvez utiliser les fonctions setInterval et setTimeout pour créer des retards et limiter la fréquence d'images.
, par exemple, si vous voulez faire de votre boucle de tirage d'environ 30 FPS vous pourriez avoir un code qui ressemble à ceci:
function draw(){
var canvas = document.getElementById('myCanvas');
//create the image object
var img = new Image();
//set the image object's image file path
var img.src = "images/myImage.png"
//check to see that our canvas exists
if(canvas.getContext)
{
//grab the context to draw to.
var ctx = cvs.getContext('2d');
//clear the screen to a white background first
//NOTE to make this faster you can clear just the parts
//of the canvas that are moving instead of the whole thing
//every time. Check out 'Improving HTML5 Canvas Performance'
//link mention in other post
ctx.fillStyle="rgb(255,255,255)";
ctx.fillRect (0, 0,512, 512);
//DO ALL YOUR DRAWING HERE....
//draw animation
ctx.drawImage(img, 0, 0);
}
//Recalls this draw update 30 times per second
setTimeout(draw,1000/30);
}
Cela vous aidera à contrôler le temps de traitement de l'animation prend. Ainsi, si vous trouvez que votre animation est trop lente, vous pouvez augmenter la fréquence d'images en changeant le dénominateur '30' à quelque chose comme '60' fps ou tout ce qui fonctionne vraiment bien pour votre programme.
En ce qui concerne l'optimisation, en plus de setTimeout(), la manière dont vous dessinez vos animations est également essentielle. Essayez de charger toutes vos images avant de les rendre ce qu'on appelle le «préchargement». C'est si vous avez un tas d'images différentes pour chaque puis cellule animée avant d'appeler votre charge de la fonction de tirer toutes les images dans un tableau d'images comme ceci:
var loadedImages = new Array();
loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";
loadedImages[1] = new Image();
loadedImages[1].src = "images/animationFrame2.png";
loadedImages[2] = new Image();
loadedImages[2].src = "images/animationFrame3.png";
loadedImages[3] = new Image();
loadedImages[3].src = "images/animationFrame4.png";
vous pouvez même les mettre dans un hachage si elle est logique pour vous au lieu de application dans laquelle
loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";
vous faire
loadedImages['frame1'] = new Image();
loadedImages['frame1'].src = "images/animationFrame1.png";
une fois que vous avez toutes vos images, vous les références que chargées pour le dessin en faisant les appeler comme si :
//Using the integer array
ctx.drawImage(loadedImages[0], 0, 0);
//OR
//Using the stringed hash
ctx.drawImage(loadedImages['frame1'], 0, 0);
Vous voulez séparer votre processus de chargement de votre processus de rendu, car le chargement des images est un processus beaucoup va ainsi ralentir vos animations vers le bas si vous chargez les choses tout en rendant. Cela ne veut pas dire que vous ne pouvez jamais charger quoi que ce soit pendant le rendu, mais soyez conscient que cela ralentira la vitesse de l'animation.
Here est un article sur le préchargement d'images.
Il y a un autre poste ici qui parle de vitesse constante d'animation sur tous les navigateurs here
Notez le link publié par le vert vérifié réponse
D'autres choses à noter sont en veillant à ne compensation et redessiner boîtes de délimitation comme mentionné dans la publication avec l'optimisation de toile HTML 5. Ce lien a de très bonnes techniques pour être conscient de tout en développant des animations sur toile.
Here sont quelques travaux de cadre qui pourraient être utiles pour comparer ce que vous faites à ce que les autres moteurs font.
Espérons que cela aide. Je suis nouveau sur javascript (j'ai commencé à coder avec il y a environ 2 semaines) et donc il pourrait y avoir de meilleures façons de faire les choses mais ce sont les choses que j'ai trouvées jusqu'à maintenant.
Pouvez-vous poster le code que vous utilisez pour l'animation de la toile? – jon3laze