La réponse courte:
SVG serait plus facile pour vous, car la sélection et le déplacement sont déjà intégrés. Les objets SVG sont des objets DOM, donc ils ont des gestionnaires de "clic", etc.
Les DIVs sont corrects mais maladroits et ont un chargement de performance horrible en grand nombre.
Canvas a les meilleures performances de haut en bas, mais vous devez implémenter vous-même tous les concepts d'état géré (sélection d'objet, etc.) ou utiliser une bibliothèque.
La réponse longue:
HTML5 Canvas est simplement une surface de dessin pour une bitmap. Vous configurez pour dessiner (disons avec une couleur et une épaisseur de ligne), dessinez cette chose, puis le canevas n'a aucune connaissance de cette chose: il ne sait pas où il se trouve ni ce que vous venez de dessiner, c'est juste des pixels. Si vous voulez dessiner des rectangles et les faire se déplacer ou être sélectionnables, vous devez coder tout cela à partir de zéro, y compris le code pour vous rappeler que vous les avez dessinés.
SVG d'autre part doit maintenir des références à chaque objet qu'il rend. Chaque élément SVG / VML que vous créez est un véritable élément dans le DOM. Par défaut, cela vous permet de garder une bien meilleure trace des éléments que vous créez et facilite le traitement des choses comme les événements de souris par défaut, mais cela ralentit considérablement lorsqu'il y a un grand nombre d'objets
Ces références DOM SVG signifient qu'une partie du jeu de jambes avec les choses que vous dessinez est faite pour vous. Et SVG est plus rapide lors du rendu de très gros objets, mais plus lent lors du rendu de nombreux objets.
Un jeu serait probablement plus rapide dans Canvas. Un énorme programme de carte serait probablement plus rapide en SVG. Si vous souhaitez utiliser Canvas, j'ai quelques tutoriels pour installer et exécuter des objets mobiles ici .
Le canevas serait préférable pour des choses plus rapides et une manipulation bitmap lourde (comme l'animation), mais prendra plus de code si vous voulez beaucoup d'interactivité.
J'ai exécuté un tas de chiffres sur le dessin HTML DIV par rapport au dessin Canvas. Je pourrais faire un énorme article sur les avantages de chacun, mais je donnerai certains des résultats pertinents de mes tests à considérer pour votre application spécifique:
J'ai fait des pages de test Canvas et HTML DIV, les deux avaient des «nœuds» mobiles. Les nœuds de canevas sont des objets que j'ai créés et dont je garde la trace en Javascript. Les nœuds HTML étaient des Divs mobiles.
J'ai ajouté 100 000 nœuds à chacun de mes deux tests. Ils ont joué assez différemment:
L'onglet de test HTML a pris une éternité à charger (chronométré à un peu moins de 5 minutes, Chrome a demandé de tuer la page la première fois). Le gestionnaire de tâches de Chrome indique que l'onglet occupe 168 Mo. Cela prend 12-13% de temps CPU quand je le regarde, 0% quand je ne le regarde pas.
L'onglet Canvas chargé en une seconde et prend 30 Mo. Cela prend également 13% du temps CPU tout le temps, que l'on le regarde ou non. (Édition 2013: Ils ont principalement corrigé cela)
Faire glisser sur la page HTML est plus fluide, ce qui est attendu par la conception, car la configuration actuelle consiste à tout redessiner toutes les 30 millisecondes dans le test Canvas. Il existe de nombreuses optimisations pour Canvas pour cela. (l'invalidation du canevas étant la plus simple, le découpage des régions, le redessin sélectif, etc. dépend juste de ce que vous avez envie d'implémenter)
Il ne fait aucun doute que Canvas pourrait être plus rapide dans la manipulation d'objets que les divs dans ce test simple, et bien sûr beaucoup plus rapide dans le temps de chargement. Le dessin / chargement est plus rapide dans Canvas et a beaucoup plus de place pour les optimisations (c'est-à-dire qu'il est très facile d'exclure les choses hors écran).
Conclusion:
- SVG est probablement meilleur pour les applications et les applications avec peu d'éléments (moins de 1000? Cela dépend vraiment)
- Canvas est meilleur pour des milliers d'objets et une manipulation soigneuse, mais beaucoup plus de code (ou une bibliothèque) est nécessaire pour le faire décoller.
- Les divs HTML sont maladroits et ne sont pas mis à l'échelle, faire un cercle n'est possible qu'avec des coins arrondis, faire des formes complexes est possible mais implique des centaines de minuscules divs à l'échelle du pixel. La folie s'ensuit.