Apakah jenis grafik yang disokong oleh HTML5?-html tutorial-php.cn

Apakah jenis grafik yang disokong oleh HTML5?

PHPz

Lepaskan： 2023-08-27 11:01:16

ke hadapan

1036 orang telah melayarinya

Apakah jenis grafik yang disokong oleh HTML5?

Grafik ialah representasi visual yang digunakan untuk mewakili sebarang idea atau imaginasi untuk meningkatkan pengalaman keseluruhan pengguna terhadap tapak web. Grafik membantu menyampaikan maklumat yang kompleks kepada pengguna dengan cara yang mudah dan boleh difahami. Beberapa cara untuk mewakili maklumat secara grafik adalah melalui foto, seni, rajah, carta alir, dsb.

Grafik dalam HTML digunakan untuk meningkatkan penampilan halaman web atau tapak web dan memudahkan interaksi pengguna. Grafik dalam HTML mempunyai tujuan yang berbeza, dan kami mempunyai teknik yang berbeza untuk ini. Kami akan membincangkan beberapa daripada mereka di bawah.

SVG

SVG bermaksud Grafik Vektor Boleh Skala. Ia seperti HTML untuk grafik. Fail SVG sentiasa disimpan dengan sambungan .svg. Teg

SVG mempunyai banyak ciri terbina dalam seperti kecerunan, kelegapan, penapis dan banyak lagi, yang kesemuanya menyediakan grafik berskala, licin dan boleh digunakan semula untuk halaman web.

Contoh: Menggunakan SVG sebagai fail imej

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

Salin selepas log masuk

Contoh 2: Menggunakan SVG sebagai imej latar belakang

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

Salin selepas log masuk

Contoh 3: Menggunakan SVG sebagaimana adanya

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

Salin selepas log masuk

CSS

CSS adalah singkatan kepada Cascading Style Sheets. Ia adalah bahasa yang digunakan untuk menerangkan persembahan halaman web dan komponennya seperti warna, reka letak dan maklumat fon. Fail CSS disimpan dengan sambungan .css.

Digunakan terutamanya untuk mengubah suai elemen HTML dan SVG melalui atribut CSS. Elemen HTML mempunyai beberapa sifat CSS terbina dalam, seperti fon, kami mempunyai saiz fon, lebar fon, berat fon. Begitu juga, untuk elemen lain kita mempunyai sifat lain. Semua sifat ini, apabila digunakan pada elemen HTML dan SVG, menghasilkan halaman web yang berskala, ringkas dan mudah difahami oleh pengguna.

Contoh

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

Salin selepas log masuk

API Kanvas

Canvas API ialah teknologi skrip sebelah pelanggan yang membolehkan penciptaan atau pengubahsuaian imej raster yang kaya. API Kanvas menggunakan pendekatan berasaskan vektor untuk mencipta bentuk dan kesan grafik lain, dan kerana ia tidak mempunyai DOM (Model Objek Dokumen), ia boleh berprestasi lebih pantas.

Canvas API digunakan untuk mencipta grafik menggunakan elemen javascript dan

Contoh

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

Salin selepas log masuk

PNG - PNG bermaksud Grafik Rangkaian Mudah Alih. Ia adalah format fail statik yang digunakan untuk penyimpanan mudah alih, dimampatkan dengan baik dan pertukaran imej raster. Fail PNG sentiasa disimpan dengan sambungan .png.

Fail PNG berwarna-warni dengan warna diindeks, skala kelabu dan mempunyai ketelusan saluran alfa. Ia boleh digunakan dengan HTML, CSS dan SVG. Fail PNG direka terutamanya untuk web kerana penstriman yang lebih pantas dan keupayaan pemaparan progresif. Disebabkan oleh ciri ini, ia sangat disokong dalam penyemak imbas web, alat penciptaan grafik dan kit alat pengimejan.

Dalam baris di atas, kami membincangkan beberapa cara untuk menggunakan grafik dalam html, tetapi kami tidak terhad kepada kaedah ini, html dan css menyediakan banyak cara lain untuk menggunakan grafik. Memandangkan fleksibiliti yang ditawarkan oleh html, ia juga mungkin untuk menggunakan grafik bergerak melalui animasi, menukar grafik secara automatik menggunakan carasoul dan bekerja dengan video.

Kesimpulan

Kesimpulannya, analisis data boleh menjadi alat yang berkuasa untuk pengurusan kecemasan. Ia membolehkan organisasi mengumpul dan menganalisis data dalam masa nyata, mengenal pasti arah aliran dan bertindak balas dengan cepat terhadap bencana. Analitis data juga boleh membantu meramalkan peristiwa masa depan, membangunkan pelan tindak balas kecemasan yang lebih tepat dan meningkatkan kesediaan keseluruhan. Dengan memanfaatkan kuasa analisis data untuk pengurusan kecemasan, organisasi boleh melindungi komuniti mereka dengan lebih baik daripada ancaman berkaitan bencana.

Atas ialah kandungan terperinci Apakah jenis grafik yang disokong oleh HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!