HTML5 Canvas: de mieux pour re-dessiner des objets ou de l'utilisation de bitmaps?
Mon projet a un HTML5 Canvas sur lequel les objets graphiques sont tirés à plusieurs reprises. Ces objets peuvent changer rapidement. Leur dessin prend du temps. Comment puis-je le rendre plus rapide?
Les objets ne sont pas trop complexes, mais contiennent des choses comme des arcs, des dégradés, des polygones.
L'apparence d'un objet dépend environ 10 propriétés qui ont chacun un des 10 valeurs. Cela signifie qu'il ya seulement environ 100 différentes apparences qu'un objet peut avoir. C'est pourquoi je suis en train de réfléchir, seul le dessin à chaque apparition une fois, puis mise en cache des bitmap pour les ré-utiliser.
Tout doit fonctionner sur le client (c'est à dire je ne peux pas utiliser ready-made d'images)
- Quelle serait la meilleure façon de le faire avec HTML5 Canvas?
- Est-ce une bonne idée ou est la surcharge de travail avec les bitmaps de plus de re-dessiner les objets à chaque fois?
Vous devez vous connecter pour publier un commentaire.
Cache cache cache! Découvrez cet article de Simon Sarris, et mes propres conclusions. Fondamentalement, vous faire une toile dans la mémoire de copier le contenu et vous pouvez les réutiliser. Vous verrez d'énormes augmentations de rendement de faire cela.
La rotation des sprites sans mise en cache
La rotation des sprites AVEC la mise en cache (à pied vers le haut pour trouver les zombies)
Vous devriez voir une assez grande amélioration dans le 2ème exemple.
MODIFIER
jsfiddle exemple mis en cache
jsfiddle exemple pas de mise en cache
Simon posté dans les commentaires, qui devrait clarifier les choses, si vous ne pouvez pas voir les gains de performance obtenus simplement en regardant les démos.
JSperf résultats par Simon Sarris
En fonction du nombre d'objets peut changer en une seconde, et par voie de conséquence le nombre d'objets que vous redessiner et comment - dans la même seconde, de redessiner plus de la mise en cache peut être tout à fait une option.
De manière générale, je suggère de considérer les éléments suivants décisionnel chemin.
Vous avez mentionné qu'il peut y avoir 100 façons différentes pour l'un de vos objets.
Cela pourrait être considéré comme similaire à un minimum de 99^2 théoriquement possible des transitions d'état pour chacun de vos objets.
Sont ces transitions d'état dramatique dans la forme /taille /couleur, mais ils sont toujours bien identifiés, balisés et faciles à gérer? Si oui, la mise en cache, juste une fois, de 100 des apparences différentes pour être utilisé par tous vos objets pourrait être une amélioration significative de la performance.
À l'inverse, si - juste pour exemple, l'arrière - plan ne change pratiquement pas et la partie occupe une moins pertinentes dans le cadre de la zone d'objet, vous pourriez envisager sérieusement de le restituer à chaque fois.
En fait, un pré-rendu de l'image pourrait ne pas correspondre à vos besoins de performances si votre objet dessiné modifie dynamiquement et en particulier sur une base continue, comme un pré-rendu de l'image doit être établi, complètement à chaque transition d'état tout en retraçant l'objet pourrait signifier moins de calcul de charge.