Mode en temps réel et mode de rétention

Il est crucial de distinguer le mode en temps réel et le mode de rétention. HTML5 Canvas est un exemple du premier et SVG est un exemple de la seconde.

Le mode en temps réel signifie qu'une fois que votre dessin est sur la toile, la toile cesse de le suivre. En d'autres termes, en tant que développeur, vous devez formuler des commandes pour dessiner des objets, créer et maintenir le modèle ou le scénario de ce à quoi devrait ressembler la sortie finale et spécifier ce qui doit être mis à jour. L'API graphique du navigateur transmet simplement vos commandes de dessin au navigateur et le navigateur exécute ces commandes.

SVG utilise le mode de rétention, vous émettez simplement une instruction de dessin pour ce que vous souhaitez afficher à l'écran, et l'API graphique du navigateur créera le modèle ou la scène en mémoire de sortie finale et le convertira en commande de dessin du navigateur.

En tant que système graphique instantané, Canvas n'a pas de modèle d'objet DOM ou document. Avec la toile, vous dessinez des pixels et le système les oublie tous, réduisant la mémoire supplémentaire requise pour maintenir le modèle interne du dessin. Avec SVG, chaque objet que vous dessinez est ajouté au modèle interne du navigateur, ce qui vous facilite la vie en tant que développeur, mais paie un prix en matière de performance.

En fonction de la différence entre le mode en temps réel et le mode de rétention, ainsi que d'autres fonctionnalités spécifiques de Canvas et SVG chacune, certaines situations où l'utilisation d'une technologie plut?t qu'une autre pourrait mieux servir les objectifs du projet.

toile html5: avant et inconvénient

lorsque d'autres méthodes plus appropriées sont disponibles. <canvas></canvas>

(en passant, SVG ne l'est pas non plus). Cette vue a été confirmée par le Dr Résumé, le créateur et fondateur de Zim JS Canvas Framework, qui a écrit: <canvas></canvas>

DOM et DOM sont bons pour afficher des informations, en particulier les informations textuelles. En revanche, la toile est une image. Le texte peut être ajouté à la toile et peut le rendre réactif, mais le texte ne peut pas être sélectionné ou recherché aussi facilement que sur le DOM. De longs pages de texte à défilement ou des pages de texte et d'image sont une grande utilité pour DOM. Dom est parfait pour les sites de médias sociaux, les forums, les achats et toutes les applications d'information que nous avons l'habitude d'utiliser. —— "Quand utiliser la bibliothèque ou le framework JavaScript Canvas"

. Mais quand <canvas></canvas> est-il un bon choix? <canvas></canvas>

à quoi est-ce que la toile est bonne?

Quoi qu'il en soit, le rendu de Dom est plus évident lorsqu'il s'agit de centaines ou même de milliers d'objets; Cependant, ni la toile ni le SVG ne sont affectées par la taille de l'objet. Compte tenu des statistiques finales, la toile offre un avantage clair en termes de performances.

Ray Tra?age Le tra?age des rayons est une technique pour créer des graphiques 3D.

Le tra?age des rayons peut être utilisé pour remplir une image en suivant les chemins de rayons des pixels dans le plan de l'image et en simulant sa rencontre avec un objet virtuel ... les effets réalisés par le tra?age des rayons ... variez de ... Création de réalistes Les images des graphiques vectoriels simples appliquent un filtre de type photo pour éliminer les yeux rouges. —— SVG et Canvas: Comment choisir, Microsoft Docs.

Cependant, bien que HTML5 Canvas soit certainement plus adapté à cette tache que SVG, cela ne signifie pas nécessairement que le tra?age des rayons est mieux effectué sur l'élément

Dessinez un grand nombre d'objets sur de petites surfaces

Un autre exemple est une scène où une application doit dessiner un grand nombre d'objets sur une surface relativement petite, telle que des visualisations de données non interactives en temps réel, telles que les représentations graphiques des modèles météorologiques.

Remplacement des pixels dans la vidéo

Comme le montre cet article de Doctor HTML5, un autre exemple adapté à l'utilisation du toile consiste à remplacer la couleur d'arrière-plan vidéo par une couleur différente, une autre scène ou une image.

Qu'est-ce que la toile HTML5 n'est pas bonne?

En revanche, dans de nombreux cas, la toile peut ne pas être le meilleur choix par rapport à SVG.

évolutivité

La plupart des scénarios où l'évolutivité est un avantage utilisera mieux SVG au lieu de la toile. La haute fidélité, les graphiques complexes, tels que les dessins architecturaux et d'ingénierie, les dessins organisationnels, les dessins biologiques, etc., sont des exemples de cette situation.

Lors du dessin avec SVG, l'agrandissement de l'image ou l'impression, l'image conservera tous les détails pour atteindre un niveau de qualité très élevé. Vous pouvez également générer ces documents à partir de la base de données, ce qui rend le format XML de SVG parfait pour cette tache.

De plus, ces graphiques sont généralement interactifs. Par exemple, lorsque vous réservez vos billets en ligne, considérez la carte des sièges, ce qui en fait un excellent cas d'utilisation pour les systèmes graphiques conservés comme SVG.

est d'utiliser JavaScript. Au lieu de cela, vous pouvez dessiner des graphiques SVG à l'aide de programmes d'édition vectoriels standard comme Adobe Illustrator ou Inkscape, et vous pouvez utiliser des CSS purs pour contr?ler son apparence et effectuer des animations et des micro-interactions subtiles convaincantes. <canvas></canvas>

combinant la toile HTML5 et SVG pour les scénarios avancés

Dans certains cas, votre application peut tirer le meilleur parti des deux mondes en combinant le toile HTML5 et SVG. Par exemple, les jeux basés sur Canvas peuvent utiliser des images SVG générées par les programmes d'édition vectoriels comme sprites pour profiter de leur évolutivité et une taille de téléchargement plus petite par rapport aux images PNG. Alternativement, un programme de dessin peut concevoir son interface utilisateur à l'aide des éléments SVG et intégrés <canvas></canvas> pour le dessin.

Enfin, une bibliothèque puissante comme Paper.js vous permet d'écrire des scripts graphiques vectoriels en plus de la toile HTML5, offrant aux développeurs un moyen pratique d'utiliser les deux technologies en même temps.

Conclusion

Dans cet article, j'explore certaines des principales caractéristiques de HTML5 Canvas et SVG pour vous aider à déterminer quelle technologie convient le mieux à une tache particulière.

Quelle est la réponse?

Chris Coyier est d'accord avec Benjamin de Cock, qui a tweeté:

Une fa?on extrêmement fondamentale de répondre à cette question est "Utiliser Canvas lorsque vous ne pouvez pas utiliser SVG" (où "ne peut pas" peut signifier l'animation de milliers d'objets, manipuler chaque pixel individuellement, etc.). En d'autres termes, SVG devrait être votre choix par défaut et Canvas est votre plan de sauvegarde.

- Benjamin de Cock (@BDC) 2 octobre 2019

DR Résumé fournit une liste de nombreuses meilleures choses à construire avec la toile, y compris les logos interactifs et la publicité, les infographies interactives, les applications d'apprentissage en ligne et plus encore.

à mon avis, il n'y a pas de règles strictes et rapides lorsqu'il est préférable d'utiliser Canvas au lieu de SVG. La différence entre le mode en temps réel et le mode de rétention montre que la toile HTML5 est le gagnant incontesté lorsqu'il s'agit de créer des jeux à forte intensité graphique, et SVG est préférable pour les images plates, les ic?nes, les éléments d'interface utilisateur, etc. Cependant, entre les deux, la toile HTML5 a également de la place pour étendre sa portée d'application, en particulier compte tenu de ce que peut fournir une variété de bibliothèques de toiles puissantes. Non seulement ils facilitent l'utilisation des deux technologies en même temps dans le même travail graphique, mais ils réalisent également des fonctionnalités difficiles dans les projets natifs de toile (tels que les contr?les et événements interactifs, la réactivité, les fonctionnalités d'accessibilité, etc.) Pour cela, ouvre la porte à des utilisations plus intéressantes de la toile HTML5, qui est utilisée par la plupart des développeurs.

FAQ pour toile vs svg