Dessiner un petit bitmap plusieurs fois à <canvas>?

Question

J'utilise gwt pour dessiner sur une toile. Je dessine un bitmap 40px x 40px cinquante fois à l'écran à chaque mouvement de la souris. Ressemble quelque chose comme:

void onDraw() { 
    for (int x = 0; x < 10; x++) { 
     for (int y = 0; y < 5; y++) { 
      canvasContext.drawImage(srcImage, x, y, ...); 
     } 
    } 
} 

Cela fonctionne étonnamment bien sur les navigateurs de bureau, et sur iphone/ipad. Sur Android, il est essentiellement inutilisable, le dessin se traîne à environ 2 fps.

Je me demande s'il existe un moyen efficace de dessiner ce petit bitmap efficacement sur android. J'ai essayé quelques trucs mais rien ne s'améliore vraiment. L'implémentation du navigateur Android est-elle vraiment à la traîne de son homologue ios?

Merci

Answer 1

Ceci est juste une chute android avec dessin directement sur la toile pour une raison quelconque. voir

Html5 canvas animation slow on Android

quelques conseils dev pour la performance ajouté

http://www.html5rocks.com/en/mobile/touch/#toc-foo

quelques performances par le dispositif benchmarks

http://www.scirra.com/blog/85/the-great-html5-mobile-gaming-performance-comparison

que vous pouvez voir les LAG droïdes vraiment loin derrière. Il peut être utile d'essayer d'utiliser des cellules DIV animées pour les entités plutôt que de dessiner directement sur le canevas. Je ne me suis pas expérimenté, mais cela pourrait mieux fonctionner. Essayez aussi de restreindre le mouvement de votre souris, je suppose que vous êtes en train de tirer sur beaucoup d'événements de déplacement de la souris qui pourraient réellement dessiner les quandrrangles plus d'une fois par image. Vous devriez avoir un certain type de fonction de mise à jour qui est appelée seulement une fois par image, qui est gérée par un certain temps de minuterie. Ensuite, votre mise à jour devrait mettre à jour les rectangles si une condition est rencontrée qu'elle aurait dû être déplacée. Plutôt que d'essayer de redessiner en fonction de l'événement de déplacer la souris. Votre fonction de mise à jour doit saisir les coordonnées de la souris et mettre à jour les positions des objets rectangle. Alors votre fonction de tirage qui est appelé juste après votre fonction de mise à jour pour rendre réellement sur l'écran

init { //called once on load 
    create array of rectangles 50, with default coordinates 
} 
update { //called once per frame 
    get coordinates of mouse 
    iterate though array of rects and update coordinates based on mouse position 
} 
draw { //called after update 
    iterate though array of rects and draw them 
} 

timer { //manages your fps and calls update and draw 
    update() 
    draw() 
}.scheduleRepeating(1000ms/fpsRate) 

maintenant je sais que c'est un certain ghetto pseudo-code, mais thats comment vous devriez être rendu d'objets. Aussi, ne pas un nid dans un ... pour des thats très mauvais que son inefficent vous devriez faire une modulation à la place

for(int i =0;i < rectArr.length; i++) { 
    x = i%10 * rectW 
    y = i%5 * rectH 
} 

neways bonne chance