Que sont Canvas et SVG en html5 ? Quelle est la différence entre eux ? (exemple)-Tutoriel H5-php.cn

Que sont Canvas et SVG en html5 ? Quelle est la différence entre eux ? (exemple)

青灯夜游

Libérer： 2018-09-11 14:46:12

original

1846 Les gens l'ont consulté

Ce chapitre vous présentera que sont Canvas et SVG en html5 ? Quelle est la différence entre eux ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Qu'est-ce que Canvas ?

Canvas est un canevas rectangulaire avec une longueur et une largeur spécifiées. Nous utiliserons le nouveau JavaScript HTML5 et pourrons utiliser l'API HTML5 JS pour dessiner divers graphiques. Cependant, le canevas lui-même n'a aucune capacité de dessin (c'est juste un conteneur pour les graphiques) - vous devez utiliser un script pour réaliser le dessin proprement dit.

Exemple de code Canvas : créez un canevas, puis dessinez un cercle sur le canevas

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas画布</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<!--添加canvas便签，创建画布-->
			<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
			    您的浏览器不支持 HTML5 canvas 标签。
			</canvas>
		</div>
	</body>
	<script type="text/javascript"> 
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.beginPath();
		ctx.arc(95,50,40,0,2*Math.PI);
		ctx.stroke();
	</script>
</html>

Copier après la connexion

Rendu :

Que sont Canvas et SVG en html5 ? Quelle est la différence entre eux ? (exemple)

2. Qu'est-ce que SVG ?

SVG Scalable Vector Graphics est un format graphique basé sur le langage de balisage extensible (XML) pour décrire des graphiques vectoriels bidimensionnels. SVG est un nouveau format de graphiques vectoriels bidimensionnels développé par le W3C et constitue également la norme de graphiques vectoriels en réseau dans la spécification. SVG suit strictement la syntaxe XML et utilise un langage descriptif au format texte pour décrire le contenu de l'image. Il s'agit donc d'un format graphique vectoriel indépendant de la résolution de l'image.

Nous pouvons résumer brièvement SVG :
SVG signifie Scalable Vector Graphics
SVG est utilisé pour définir des graphiques vectoriels pour le Web
SVG est défini à l'aide du format XML Graphics
SVG les images peuvent être agrandies ou redimensionnées sans perte de qualité graphique
SVG est une norme du World Wide Web Consortium
SVG est intégré aux normes du W3C telles que DOM et XSL

exemple de code SVG :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>SVG</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<svg width="100%" height="100%"  >
		        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
		    </svg>
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Que sont Canvas et SVG en html5 ? Quelle est la différence entre eux ? (exemple)

3. Différence toile et SVG

SVG

SVG est un langage qui utilise XML 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.

Caractéristiques :
Ne dépend pas de la résolution
Gestionnaire d'événements de support
Idéal pour les applications avec de grandes zones de rendu (telles que Google Maps)
Une complexité élevée ralentira le rendu (toute application qui abuse du DOM n'est pas rapide)
Ne convient pas aux applications de jeu

Canvas

Canvas dessine des graphiques 2D via JavaScript.
Le canevas est rendu pixel par pixel.
Dans Canvas, une fois le graphique 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.

Caractéristiques :
Cela dépend de la résolution
Les gestionnaires d'événements ne sont pas pris en charge
Faibles capacités de rendu de texte
Possibilité d'enregistrer les images des résultats au format .png ou .jpg
Idéal pour les jeux à forte intensité graphique où de nombreux objets seront redessinés fréquemment

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!