08-05-2013, 12:25 PM
Je reviens sur ce que j'ai dit: le texte était baveux car la dimension affichée du canvas (.style.width/.style.height) n'était pas la dimension du canvas lui-même (.width/.height).
Dans un tel cas, le dessin se fait dans le canvas, avec la taille .width et .height. Puis le résultat (une image) est redimensionnée à la valeur du .style.width/.style.height. Lors de ce redimensionnement, forcément, cela peut devenir baveux.
Donc, bon, finalement, le canvas n'est pas plus moche que le DOM, il faut uniquement avoir un styling d'affichage de dimension exactement égale à celle du canvas pour ne pas avoir de "resampling" baveux.
Du coup, dans ton cas, les deux seraient envisageables, mais je pencherai quand même pour CSS/DOM, car ton animation est pré-conçue (donc "keyframable"), et que tu n'a que peu d'éléments.
Dans le cas d'une map de jeu (beaucoup d'éléments), ou d'une animation non-préconçue (combat fait en temps réel par le client), j'irai plutôt sur canvas (et donc, sur eclerd, je vais changer et passer de img à canvas, car si la limite du nombre de cases affichées en même temps avoisine les 100x100 pour chacune des 4 vues, cela ferait quand même 40.000 objets dans le DOM...)
Dans un tel cas, le dessin se fait dans le canvas, avec la taille .width et .height. Puis le résultat (une image) est redimensionnée à la valeur du .style.width/.style.height. Lors de ce redimensionnement, forcément, cela peut devenir baveux.
Donc, bon, finalement, le canvas n'est pas plus moche que le DOM, il faut uniquement avoir un styling d'affichage de dimension exactement égale à celle du canvas pour ne pas avoir de "resampling" baveux.
Du coup, dans ton cas, les deux seraient envisageables, mais je pencherai quand même pour CSS/DOM, car ton animation est pré-conçue (donc "keyframable"), et que tu n'a que peu d'éléments.
Dans le cas d'une map de jeu (beaucoup d'éléments), ou d'une animation non-préconçue (combat fait en temps réel par le client), j'irai plutôt sur canvas (et donc, sur eclerd, je vais changer et passer de img à canvas, car si la limite du nombre de cases affichées en même temps avoisine les 100x100 pour chacune des 4 vues, cela ferait quand même 40.000 objets dans le DOM...)