Jusqu'à présent, les principales caractéristiques du SVG et de la toile ont été résumées. Ce sont toutes des technologies d'affichage graphiques 2D prises en charge dans HTML5, et ils prennent tous en charge les graphiques vectoriels. Maintenant, comparons ces deux technologies et analysons leurs forces et leurs scénarios applicables.
Tout d'abord, analysons les caractéristiques importantes des deux technologies et examinons le tableau ci-dessous:
| Toile | SVG |
|---|---|
| Basé sur des pixels (dynamic.png) | Basé sur la forme |
| Élément HTML unique | Plusieurs éléments graphiques qui font partie du DOM |
| Modifier uniquement via les scripts | Modifier à travers les scripts et le CSS |
| Granulation du modèle d'événement / interaction utilisateur (x, y) | Modèle d'événements / Abstraction d'interaction utilisateur (RECT, PATH) |
| De meilleures performances lorsque l'image est petite et que le nombre d'objets est grand (> 10k) (ou les deux sont respectés) | De meilleures performances lorsque le nombre d'objets est petit (<10k), plus grande image (ou satisfaire les deux) |
À partir de la comparaison ci-dessus, nous pouvons voir que Canvas a un fort avantage dans le fonctionnement des pixels; Alors que le plus grand avantage de SVG est son interactivité et son opérabilité commode. L'utilisation de la toile est grandement affectée par la taille de la toile (en fait le nombre de pixels), et l'utilisation de SVG est relativement considérablement affectée par le nombre d'objets (nombre d'éléments). Canvas et SVG sont toujours différents en termes de méthodes de modification. Après avoir dessiné un objet Canvas, il ne peut pas être modifié à l'aide de scripts et de CSS. Les objets SVG font partie du modèle d'objet de document, ils peuvent donc être modifiés à tout moment à l'aide de scripts et de CSS.
En fait, Canvas est un système graphique de motifs en temps réel basé sur des pixels. Après avoir dessiné l'objet, l'objet n'est pas enregistré dans la mémoire. Lorsque cet objet est à nouveau nécessaire, il doit être repris; SVG est un système graphique de motifs retenu basé sur la forme. Après avoir dessiné l'objet, il sera enregistré en mémoire. Lorsqu'il doit modifier les informations de cet objet, elle peut être modifiée directement. Cette différence fondamentale a conduit à des différences dans de nombreux scénarios d'application.
Nous pouvons également comprendre cela dans les applications courantes suivantes.
Documentation haute fidélité Cet aspect est facile à comprendre. Afin de parcourir des documents, non déformés lors de la mise à l'échelle, ou doit imprimer des documents de haute qualité, SVG est généralement préféré, comme les services de carte. Ressources d'image statique SVG est souvent utilisé pour des images simples, qu'il s'agisse d'une image dans une application ou une page Web, une grande image ou une petite image. Étant donné que SVG est chargé dans le DOM, ou du moins analysé avant de créer une image, les performances baisseront légèrement, mais cette perte d'efficacité est extrêmement faible par rapport au coût du rendu d'une page Web (environ quelques millisecondes).En termes de taille de fichier (dans le but d'évaluer le trafic réseau), l'image SVG et la taille de l'image PNG ne sont pas très différentes. Mais parce que SVG est évolutif sous forme de format d'image, l'utilisation de SVG est un assez bon choix si les développeurs souhaitent utiliser l'image à plus grande échelle, ou si les utilisateurs utilisent des écrans avec un DPI élevé.
Fonctionnement des pixels Lorsque vous utilisez Canvas, vous pouvez obtenir une vitesse de dessin rapide sans conserver les informations correspondantes de l'élément. Surtout lorsque les opérations de pixel doivent être traitées, les performances sont meilleures. La technologie Canvas est essentiellement utilisée pour ce type d'application. Données en temps réel La toile est idéale pour la visualisation des données non interactive en temps réel. Par exemple, les données météorologiques en temps réel. Graphiques et graphiques Vous pouvez utiliser SVG ou Canvas pour dessiner des graphiques et des graphiques connexes, mais si vous souhaitez mettre l'accent sur l'opérabilité, SVG est sans aucun doute le meilleur choix. Si vous n'avez pas besoin d'interactivité et de souligner les performances, la toile est plus appropriée. Jeu bidimensionnel Étant donné que la plupart des jeux sont développés à l'aide d'API de bas niveau, Canvas est plus facile à accepter. Mais en fait, lors du dessin de la scène du jeu, Canvas doit dessiner et positionner à plusieurs reprises la forme, tandis que SVG est maintenu en mémoire, et la modification des attributs connexes est très facile, donc SVG est également un bon choix.Il y a peu de différence de performances entre Canvas et SVG lors de la création de jeux avec plusieurs objets sur une carte de mini-jeu. Cependant, à mesure que davantage d'objets sont créés, le code de toile augmentera beaucoup plus. Étant donné que l'objet Canvas doit être redémarré chaque fois que la boucle de jeu est effectuée, le jeu Canvas ralentit.
Conception de l'interface utilisateur En raison de sa bonne interactivité, SVG est sans aucun doute meilleure. Avec l'affichage graphique du mode retenu de SVG, vous pouvez créer tous les détails de l'interface utilisateur dans des balises de type HTML dans le corps. Étant donné que chaque élément SVG et élément enfant peut répondre aux événements séparés, vous pouvez créer des interfaces utilisateur complexes très facilement. Canvas vous oblige à spécifier comment créer chaque partie de l'interface utilisateur dans un ordre de code plus complexe. La commande que vous devez suivre est:• Obtenez le contexte.
• Commencez à dessiner.
• Spécifiez la couleur de chaque ligne et chaque remplissage.
• Définissez la forme.
• Dessin complet.
De plus, la toile ne peut gérer les événements que dans la toile. S'il existe une interface utilisateur plus complexe, vous devez déterminer les coordonnées de l'emplacement sur lequel vous cliquez sur le canevas. SVG peut gérer les événements pour chaque élément enfant individuellement.
Les deux exemples suivants illustrent les avantages techniques respectifs de la toile et du SVG:
Les applications typiques de la toile sont comme un écran vert : http://samples.msdn.microsoft.com/workshop/samples/graphicsinhtml5/canvasgreenscreen.htmLes rendus sont les suivants:
Après avoir ouvert la page, vous pouvez afficher le code source de la page.
Cette application est de lire et d'écrire des pixels à partir de deux vidéos dans une autre vidéo, et le code utilise deux vidéos, deux toiles et une toile finale. Capturez une image sur la vidéo à la fois et dessinez sur deux toiles distinctes, permettant de lire les données:
CTXSOURCE1.DRAWIMAGE (VIDEO1, 0, 0, VideoWidth, VideoHeight);
CTXSOURCE2.DRAWIMAGE (VIDEO2, 0, 0, VideoWidth, VideoHeight);
L'étape suivante consiste donc à récupérer les données pour chaque image dessinée afin que chaque pixel individuel puisse être vérifié:
CurrentFramesource1 = ctxSource1.getImagedata (0, 0, videowidth, videoheight);
CurrentFramesource2 = ctxSource2.GetImagedata (0, 0, videowidth, videoheight);
Après avoir obtenu, le code parcourera le tableau des pixels de l'écran vert et recherchera les pixels verts. S'il est trouvé, le code remplacera tous les pixels verts par les pixels dans la scène d'arrière-plan. :
pour (var i = 0; i <n; i ++)
{
// Prenez le RBG pour chaque pixel:
r = currentframesource1.data [i * 4 + 0];
g = currentframesource1.data [i * 4 + 1];
b = currentframesource1.data [i * 4 + 2];
// Si cela ressemble à un pixel vert, remplacez-le:
if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // cible green est (24, 109, 21), alors regardez autour de ces valeurs.
{
PixeLindex = i * 4;
currentFramesource1.data [pixELindex] = currentFramesource2.data [PixeLindex];
CurrentFramesource1.data [PixeLindex + 1] = CurrentFramesource2.data [PixeLindex + 1];
currentFramesource1.data [pixELindex + 2] = currentFramesource2.data [pixELindex + 2];
currentFramesource1.data [pixELindex + 3] = currentFramesource2.data [pixELindex + 3];
}
}
Enfin, le tableau des pixels est écrit sur la toile cible:
ctxdest.putImagedata (CurrentFramesource1, 0, 0);
Les applications typiques de SVG sont comme l'interface utilisateur :<! Doctype html>
<html>
<adal>
<script type = "text / javascript">
// Cette fonction est appelée lorsque le cercle est cliqué.
fonction clickme () {
// Affichez l'alerte.
alert ("Vous avez cliqué sur l'élément UI SVG.");
}
</cript>
</ head>
<body>
<h1>
Interface utilisateur SVG
</h1>
<! - Créez le volet SVG. ->
<SVG>
<! - Créez le cercle. ->
<cercle cx = "100" cy = "100" r = "50" fill = "gold" id = "uielement" onclick = "clickme ();"
/>
</svg>
<p>
Cliquez sur l'élément d'interface utilisateur circulaire d'or.
</p>
</docy>
</html>
Bien que cet exemple soit simple, il a toutes les caractéristiques de l'interface utilisateur. À partir de cet exemple, nous apprécions à nouveau la nature interactive pratique de SVG.
Enfin, utilisez une image pour résumer les technologies adaptées à chaque application. Chaque bloc de la figure représente un type d'application. Plus il est proche d'une certaine extrémité, plus il doit utiliser cette technologie: il doit utiliser cette technologie:
Référence pratique:Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centre de développement: https://developer.mozilla.org/en/svg
Référence populaire: http://www.chinasvg.com/
Document officiel: http://www.w3.org/tr/svg11/