Quelle est la différence entre canevas et SVG en HTML5

Ce que je vais partager avec vous aujourd'hui concerne la différence entre Canvas et SVG en JavaScript. Cela a un certain effet de référence et j'espère que cela sera utile à tout le monde

【 Cours recommandés : Tutoriel HTML5]

SVG

SVG est un langage qui utilise XML pour décrire des graphiques 2D . Il est basé sur XML. Autrement dit, nous pouvons attacher un gestionnaire d'événements JavaScript à un élément si les propriétés de l'objet SVG changent, le navigateur peut reproduire automatiquement les graphiques.

Canvas

Canvas dessine des graphiques 2D via JavaScript. Il est rendu pixel par pixel. Une fois le graphique dessiné, si sa position change, la scène entière doit être redessinée, y compris le ou les objets qui ont été recouverts

SVG et toile La différence

(1) SVG est un langage utilisé pour décrire les graphiques 2D en XML, le canevas utilise JavaScript pour représenter dynamiquement les graphiques 2D

(2) SVG peut prendre en charge les gestionnaires d'événements et le canevas

n'est pas pris en charge (3) Lorsque les attributs du SVG changent, le navigateur peut le restituer, ce qui convient aux graphiques vectoriels, mais le canevas ne le peut pas, ce qui est plus adapté aux jeux vidéo, etc.

(4) Canvas peut très bien dessiner des pixels, peut être utilisé pour enregistrer les résultats au format png ou gif, et peut être utilisé comme conteneur API.

(5) la toile dépend de la résolution. SVG est indépendant de la résolution.

(6) SVG a un meilleur rendu du texte, mais Canvas ne peut pas bien restituer. Le rendu SVG peut être plus lent que Canvas, surtout lorsqu'une grande quantité de DOM est appliquée.

(7) Canvas est plus adapté au rendu de zones plus petites. SVG rend mieux sur des zones plus grandes.

Comparaison entre SVG et Canvas

SVG	canvas
Non évolutif
Prise en charge du DOM et des événements	Aucun support d'événement
Ne dépend pas de la résolution	Dépend de la résolution
Peut être plus lent lors du rendu de zones complexes	Ne convient pas aux zones plus grandes ou complexes
Présenter une zone meilleure et plus grande (sauf DOM)	Rendre une zone plus petite
Meilleurs graphiques vectoriels	Plus adapté à l'animation (vidéo) ; et images
Ne convient pas à l'API	Convient pour l'API
Présentez bien le texte	Ne restitue pas bien le texte

SVG	canvas
可扩展	不可扩展
支持DOM和事件	没有事件支持
不依赖分辨率	分辨率依赖
在渲染复杂区域时可能会更慢	不适合较大或复杂的区域
呈现更好更大的区域（DOM除外）	渲染更小的区域
更好的矢量图形	更适合动画（视频）和图像
不适合API	适合API
很好地呈现文本	不能很好地呈现文本

Analyse de cas

La toile dessine un cercle

<canvas id="circle"></canvas>

<script type="text/javascript">
	
	var circle=document.getElementById("circle");
	var yuan=circle.getContext("2d");
	yuan.beginPath();
	yuan.strokeStyle="pink";
	yuan.arc(50,50,50,0,Math.PI*2,true);
	 yuan.stroke();
</script>

Comme vous pouvez le voir Lorsque l'image est agrandie, il y a des irrégularités bords autour de la bordure

SVG dessine un cercle

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1">
<circle cx="100" cy="50" r="40" stroke="pink"
stroke-width="2" fill="#fff"/>
</svg>

On peut voir que les graphiques dessinés par SVG ne seront pas déformés une fois agrandis.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'à travers cet article, tout le monde aura une certaine compréhension de la différence entre Canvas et SVG.

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!