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

1780 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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