cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana Canvas Javascript API berfungsi dalam penyemak imbas utama

Bagaimana Canvas Javascript API berfungsi dalam penyemak imbas utama

王林
王林ke hadapan
2023-09-16 08:53:021426semak imbas

Canvas Javascript API 在主要浏览器中的作用

API JavaScript kanvas ialah alat yang berkuasa untuk mencipta dan memanipulasi grafik di web. Ia membolehkan anda melukis grafik 2D menggunakan kod JavaScript dan disokong oleh kebanyakan pelayar web moden. Operasi permainan, animasi, pemprosesan video dan banyak lagi semuanya datang daripada API Kanvas.

API kanvas dilaksanakan dalam bentuk elemen kanvas, iaitu elemen HTML yang boleh diletakkan dalam dokumen HTML. Elemen kanvas berfungsi sebagai permukaan lukisan dan boleh digayakan dan diletakkan menggunakan CSS.

Untuk melukis grafik pada kanvas, anda boleh menggunakan kaedah lukisan API kanvas, seperti arc, lineTo dan fillRect. Kaedah ini membolehkan anda melukis bentuk, garisan dan grafik lain pada kanvas.

Sokongan pelayar untuk API Kanvas

Google Chrome dan Mozilla Firefox ialah penyemak imbas utama yang menyokong API kanvas. Jangan sekali-kali menggunakan Safari atau Microsoft Edge dengan API Kanvas. API kanvas disokong oleh semua pelayar utama kecuali Internet Explorer.

Kanvas berfungsi pada Windows, Linux, Mac, Android dan iOS serta semua penyemak imbas utama. Sistem pengendalian harus melakukan semua pemeriksaan keselamatan dan peningkatan untuk memastikan API kanvas berfungsi dengan baik. Berikut ialah senarai penyemak imbas sedemikian dan versinya.

  • Chrome

  • Firefox, tetapi versi sambungan tidak disokong

  • Tepi

  • Pelayar Respondus Lockdown hanya menyokong keperluan sistem terkini.

  • Safari hanya untuk Macintosh

Sistem dengan sekurang-kurangnya 1GB RAM sesuai untuk menggunakan API kanvas. Penyemak imbas mudah alih asli mempunyai kurang sokongan untuk peranti tablet. Pelayar Android lalai berubah bergantung pada peranti mudah alih.

Pelayar mudah alih

iOS

Safari ialah penyemak imbas lalai dan mempunyai sokongan terhad untuk Kanvas.

Chrome

Photon Flash Player menyokong Flash

Android

  • Chrome ialah penyemak imbas lalai dan mempunyai sokongan terhad untuk Kanvas

  • Firefox

Pembaca Skrin

  • Macintosh VoiceOver dalam versi terkini Safari

  • JAWS untuk PC dalam versi terkini Firefox

  • PC NNVDA (versi Firefox terkini)

Chrome tidak menyokong pembaca skrin dalam kanvas.

Kesan kod yang disokong pelayar API Kanvas

Kanvas ialah elemen HTML 5. Kaedah getContext() dalam kanvas mengembalikan konteks lukisan. Jika null dikembalikan, ini bermakna elemen kanvas tidak disokong.

Pengguna boleh mengikuti sintaks di bawah dan menggunakan kod di bawah untuk menyemak sama ada penyemak imbas menyokong elemen kanvas.

Tatabahasa

if(document.createElement('canvas').getContext){
   /*Canvas object available*/
}

Keadaan if dalam sintaks mencipta elemen kanvas dan cuba mendapatkan konteks. Jika konteks dikembalikan, penyemak imbas menyokong kanvas.

Contoh

Dalam program ini, pengguna boleh menyemak sokongan pelayar untuk kanvas dengan mengklik butang. Apabila anda mengklik butang, acara memanggil fungsi yang cuba mendapatkan konteks kanvas menggunakan sintaks di atas. Terdapat pembolehubah bendera dalam program yang membezakan sokongan pelayar dan memaparkan mesej kepada pengguna. 

<html>
<body>
   <h2> Check if your browser support canvas API in JavScript </i>
   </h2>
   <button class="button" onclick="browserSupport()">
      Check
   </button>
   <br> <br>
   <b class="outputEl"> </b>
   <script>
      function browserSupport() {
         if (document.createElement('canvas').getContext)
            hasSupport = true;
         else
            hasSupport = false;
         document.querySelector('.outputEl').innerHTML = hasSupport ? "Browser supports canvas" : "Browser does not support canvas";
      }
   </script>
</body>
</html>

Contoh

Berikut ialah contoh cara melukis bulatan ringkas pada kanvas menggunakan API kanvas -

<html>
<body>
   <p> Drawing a circle using Canvas JavaScript API </p>
   <canvas id="myCanvas" width="200" height="100"></canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      context.beginPath();
      context.arc(95, 50, 40, 0, 2 * Math.PI);
      context.stroke();
   </script>
</body>
<html>

Dalam contoh ini, elemen kanvas dicipta dengan id "myCanvas" dan lebar dan tinggi masing-masing 200 dan 100 piksel. Kaedah getContext digunakan untuk mendapatkan konteks lukisan kanvas, dan kaedah arka digunakan untuk melukis bulatan dengan titik pusat (95, 50) dan jejari 40 piksel. Kemudian gunakan kaedah strok untuk melukis bulatan pada kanvas.

Tutorial ini membantu kami memahami sama ada Canvas API ialah bahagian asli terbina dalam semua penyemak imbas utama. Tidak semua pelayar utama mempunyai API kanvas terbina dalam. Kami kini mengetahui sekeping kod untuk mengesan sokongan penyemak imbas untuk API kanvas. Pengguna boleh mengelakkan ralat apabila mengekodkan kanvas menggunakan penyemak imbas sebelumnya, disokong oleh coretan kod ini untuk semakan.

Atas ialah kandungan terperinci Bagaimana Canvas Javascript API berfungsi dalam penyemak imbas utama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript firefox css chrome safari html edge NULL if 事件 canvas windows android ios microsoft linux
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Hasilkan jujukan n pertama melihat dan menyebut nombor dalam JavaScriptArtikel seterusnya：Hasilkan jujukan n pertama melihat dan menyebut nombor dalam JavaScript

Artikel berkaitan

Lihat lagi