Maison > interface Web > tutoriel HTML > Quels types de graphiques HTML5 prend-il en charge ?

Quels types de graphiques HTML5 prend-il en charge ?

PHPz
Libérer: 2023-08-27 11:01:16
avant
1016 Les gens l'ont consulté

Quels types de graphiques HTML5 prend-il en charge ?

Les graphiques sont des représentations visuelles utilisées pour représenter toute idée ou imagination afin d'améliorer l'expérience globale de l'utilisateur sur le site Web. Les graphiques aident à transmettre des informations complexes aux utilisateurs de manière simple et compréhensible. Certaines façons de représenter graphiquement les informations consistent à utiliser des photos, des illustrations, des diagrammes, des organigrammes, etc.

Les graphiques en HTML sont utilisés pour améliorer l'apparence d'une page Web ou d'un site Web et faciliter l'interaction avec l'utilisateur. Les graphiques en HTML répondent à des objectifs différents et nous disposons de différentes techniques pour cela. Nous en discuterons ci-dessous.

SVG

SVG signifie Scalable Vector Graphics. C'est comme le HTML pour les graphiques. Les fichiers SVG sont toujours enregistrés avec l'extension .svg. La balise est une balise conteneur car elle a des balises d'ouverture et de fermeture, et pour fonctionner, elle doit être ajoutée à l'intérieur de l'élément . Il produit des graphiques, des animations et des images de haute qualité, réutilisables, faciles à comprendre et à importer. Ils peuvent être facilement modifiés en éditant le langage de balisage ou en utilisant une feuille de style telle que CSS.

SVG possède de nombreuses fonctionnalités intégrées telles que les dégradés, l'opacité, les filtres, etc., qui fournissent toutes des graphiques évolutifs, fluides et réutilisables pour les pages Web.

Exemple : Utiliser SVG comme fichier image

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SVG</title>
</head>
<body>
   <h1>Below is an example of an svg used as an image.</h1>
   <img src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" alt="SVG">
</body>
</html>
Copier après la connexion

Exemple 2 : Utiliser SVG comme image d'arrière-plan

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SVG</title>
   <style>
      body{
         background: url("https://www.tutorialspoint.com/images/physics-tutorials_icon.svg") no-repeat;
      }
   </style>
</head>
<body>
   <p>This is Using SVG as background image</p>
</body>
</html>
Copier après la connexion

Exemple 3 : Utiliser SVG tel quel

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <svg
      xmlns="http://www.w3.org/2000/svg"
      width="375.00078"
      height="728.17084"
      viewBox="0 0 375.00078 728.17084"
      xmlns:xlink="http://www.w3.org/1999/xlink"
   >
   <path
      d="M2.79045,484.29492c-.55273,0-1-.44727-1-1V201.5c0-70.91211,57.69043-128.60254,128.60254-128.60254h217.13771c.55273,0,1,.44727,1,1s-.44727,28-1,28l217.1377-27C60.58439,74.89746,3.79045,131.69141,3.79045,201.5V483.29492c0,.55273-.44727,1-1,1Z"  fill="#3f3d56"
   />
   <path
      d="M348.29044,0c.55273,0,1,.44727,1,1V282.79492c0,70.91211-57.69043,128.60254-128.60254,128.60254H3.55021c-.55273,0-1-.44727-1-1s.44727-1,1-1H220.68792c69.80861,0,126.60255-56.79395,126.60255-126.60254V1c0-.55273,.44727-1,1-1h-.00003Z"  fill="#3f3d56"/>
</body>
</html>
Copier après la connexion

CSS

CSS signifie Feuilles de style en cascade. Il s'agit d'un langage utilisé pour décrire la présentation d'une page Web et ses composants tels que la couleur, la mise en page et les informations sur la police. Les fichiers CSS sont enregistrés avec l'extension .css.

Principalement utilisé pour modifier des éléments HTML et SVG via des attributs CSS. Les éléments HTML ont plusieurs propriétés CSS intégrées, telles que les polices, nous avons la taille de la police, la largeur de la police et le poids de la police. De même, pour les autres éléments nous avons d’autres propriétés. Toutes ces propriétés, lorsqu'elles sont appliquées aux éléments HTML et SVG, produisent des pages Web évolutives, simples et faciles à comprendre pour les utilisateurs.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CSS</title>
   <link rel="stylesheet" href="style.css">
  <style>
      body{
         background-image: url("image.jpg");
         background-color:aqua;
         background-repeat: repeat;
         background-position: 0%;
      }
      h1{
         color:black;
         border: 2px solid black;
         font-size: 50px;
      }
      p{
         color:black;
         border:2px solid black;
         font-size: 50px;
      }
   </style>
</head>
<body>
   <h1>This is an exmaple of using CSS with HTML.</h1>
   <p>CSS helps in making the content and images of the webpage looks more simpler and presentable.</p>
</body>
</html>
Copier après la connexion

API Toile

Canvas API est une technologie de script côté client qui permet une création ou une modification riche d'images raster. L'API Canvas utilise une approche vectorielle pour créer des formes et d'autres effets graphiques, et comme elle ne dispose pas de DOM (Document Object Model), elle peut fonctionner plus rapidement.

L'API

Canvas est utilisée pour créer des graphiques à l'aide d'éléments javascript et . L'élément a deux attributs, width et height, tous deux facultatifs. Mais si nous utilisons ces propriétés et ne définissons pas leurs valeurs, alors par défaut la largeur sera définie sur 300 px et la hauteur sur 150 px. L'API Canvas est largement utilisée par les développeurs pour développer des jeux haut de gamme et des applications complètes.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CANVAS API</title>
</head>
<body>
   <h1>This is an example of CANVAS API in HTML</h1>>
   <canvas id="canvas" width="300" height="150" style="border:2px solid black;"></canvas>
   <script>
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(100,55,45,0,2*Math.PI);
      ctx.stroke();
   </script>
</body>
</html>
Copier après la connexion

PNG - PNG signifie Portable Network Graphics. Il s'agit d'un format de fichier statique utilisé pour le stockage portable et bien compressé et l'échange d'images raster. Les fichiers PNG sont toujours enregistrés avec l'extension .png.

Les fichiers PNG sont colorés avec des couleurs indexées, des niveaux de gris et ont une transparence de canal alpha. Il peut être utilisé avec HTML, CSS et SVG. Les fichiers PNG sont principalement conçus pour le Web en raison de leurs capacités de streaming plus rapides et de rendu progressif. Grâce à ces fonctionnalités, ils sont hautement pris en charge dans les navigateurs Web, les outils de création graphique et les boîtes à outils d'imagerie.

Dans les lignes ci-dessus, nous avons discuté de certaines façons d'utiliser les graphiques en HTML, mais nous ne nous limitons pas à ces méthodes, HTML et CSS offrent de nombreuses autres façons d'utiliser les graphiques. Compte tenu de la flexibilité offerte par le HTML, il est également possible d'utiliser des graphiques animés via l'animation, de modifier automatiquement les graphiques à l'aide de carasoul et de travailler avec des vidéos.

Conclusion

En conclusion, l’analyse des données peut être un outil puissant pour la gestion des urgences. Il permet aux organisations de collecter et d'analyser des données en temps réel, d'identifier les tendances et de réagir rapidement aux catastrophes. L’analyse des données peut également aider à prédire les événements futurs, à élaborer des plans d’intervention d’urgence plus précis et à améliorer la préparation globale. En exploitant la puissance de l’analyse des données pour la gestion des urgences, les organisations peuvent mieux protéger leurs communautés contre les menaces liées aux catastrophes.

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!

Étiquettes associées:
source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal