Rumah >hujung hadapan web >html tutorial >Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?
Bolehkah elemen Kanvas HTML5 dibuat melalui pembina Kanvas?
- PHPzke hadapan
- 2023-09-06 11:41:071240semak imbas
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>
Apabila skrip dilaksanakan, ia mengakses elemen
Jika pengguna mengklik butang, kanvas akan digunakan pada halaman web.
Gunakan kaedah createElement()
KaedahHTML 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!