Toile HTML 5 vs SVG

Canvas et SVG vous permettent tous deux de créer des graphiques dans le navigateur, mais ils sont fondamentalement différents.

SVG (Apprentissage recommandé : tutoriel html)

SVG est une méthode qui utilise XML Un langage pour décrire des graphiques 2D.

SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.

En SVG, chaque forme dessinée est considérée comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut automatiquement reproduire le graphique.

Canvas

Canvas dessine des graphiques 2D via JavaScript.

Le canevas est rendu pixel par pixel.

Dans Canvas, une fois qu'un graphique est dessiné, il ne recevra plus l'attention du navigateur. Si sa position change, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par des graphiques.

Comparaison de Canvas et SVG

Le tableau suivant répertorie certaines des différences entre Canvas et SVG.

Canvas

Dépend de la résolution

Ne prend pas en charge les gestionnaires d'événements

Faibles capacités de rendu de texte

Possibilité d'enregistrer l'image résultante au format .png ou .jpg

Idéal pour les jeux à forte intensité graphique où de nombreux objets seront redessinés fréquemment

SVG

Ne dépend pas de la résolution

Prend en charge les gestionnaires d'événements

Idéal pour les applications avec de grandes zones de rendu (comme Google Maps)

Haute complexité Ralentira le rendu (toute application qui abuse de la DOM n'est pas rapide)

Ne convient pas aux applications de jeux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!