Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?-html tutorial-php.cn

Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?

PHPz

Lepaskan： 2023-09-06 11:41:07

ke hadapan

1278 orang telah melayarinya

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

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

Canvas Api boleh digunakan untuk melukis grafik melalui elemen javascript dan html

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>

Salin selepas log masuk

Apabila skrip dilaksanakan, ia mengakses elemen

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>

Salin selepas log masuk

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!