Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?

Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?

PHPz
PHPzke hadapan
2023-09-06 11:41:071219semak imbas

Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?

Dalam artikel ini, kami akan melaksanakan cara mencipta elemen kanvas HTML5 daripada pembina kanvas. Kita boleh mencapai tugas ini dengan menggunakan elemen dalam HTML.

Sebelum kita menyelami contoh, mari kita fahami dulu definisi dan penggunaan elemen dalam HTML.

Canvas Api boleh digunakan untuk melukis grafik melalui elemen javascript dan html. Ia boleh digunakan untuk animasi, grafik permainan, visualisasi data, penyuntingan foto, pemprosesan video masa nyata, dsb.

Sebahagian besar tumpuan API Kanvas adalah pada kesan visual 2D. API WebGL memaparkan kesan visual 2D dan 3D dipercepatkan perkakasan menggunakan elemen .

Mari lihat contoh berikut untuk memahami pembina kanvas dengan lebih baik

Gunakan kaedah getElementId()

Elemen dengan nilai yang diberikan dikembalikan oleh fungsi getElementById(). Jika elemen tidak wujud, fungsi getElementById() mengembalikan null. Salah satu kaedah yang paling biasa digunakan dalam HTML DOM ialah getElementById().

Contoh

Dalam contoh di bawah, kami menggunakan getElementId() untuk mengakses elemen .

<!DOCTYPE html> 
<html> 
<body> 
   <canvas id="tutorial1" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
   <p>Click To Apply Canvas</p> 
   <button onclick="mytutorial()">CLICK</button>
   <script> 
      function mytutorial() { 
         var c = document.getElementById("tutorial1");
         var ctx = c.getContext("2d"); 
         ctx.fillStyle = "#D6EAF8"; 
         ctx.fillRect(20, 20, 150, 100);
      } 
   </script> 
</body> 
</html>

Apabila skrip dilaksanakan, ia mengakses elemen , menghasilkan output yang terdiri daripada kotak kanvas dengan gesaan "Klik untuk menggunakan kanvas" dan butang klik.

Jika pengguna mengklik butang, kanvas akan digunakan pada halaman web.

Gunakan kaedah createElement()

Kaedah

HTML DOM createElement() digunakan untuk mencipta elemen HTML secara dinamik menggunakan JavaScript. Ia membina nod elemen yang ditentukan dengan nama elemen sebagai hujah.

Contoh

Pertimbangkan contoh berikut di mana kami menggunakan createElement() untuk mencipta elemen .

<!DOCTYPE html> 
<html> 
   <style> canvas { border: 1px solid black; } </style> 
<body> 
   <button onclick="mytutorial()">CLICK</button>
   <p>Click To Create Canvas</p> 
   <script> 
      function mytutorial() { 
         var x = document.createElement("CANVAS"); 
         var ctx = x.getContext("2d");
         ctx.fillStyle = "#ABEBC6"; 
         ctx.fillRect(20, 20, 150, 100);
         document.body.appendChild(x);
      } 
   </script> 
</body> 
</html>

Apabila anda menjalankan skrip di atas, ia akan menghasilkan output yang mengandungi gesaan "Klik untuk mencipta kanvas" dan butang "Klik".

Apabila pengguna mengklik butang, kaedah createElement() akan mendapat akses dan mencipta kanvas pada halaman web.

Atas ialah kandungan terperinci Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam