


Pengenalan kepada pengendalian acara kemahiran tutorial HTML5 Canvas_html5
DOM ialah bahagian yang sangat penting dalam medan bahagian hadapan Web DOM digunakan bukan sahaja semasa memproses elemen HTML, tetapi juga dalam pengaturcaraan grafik. Sebagai contoh, dalam lukisan SVG, pelbagai grafik dimasukkan ke dalam halaman dalam bentuk nod DOM, yang bermaksud bahawa grafik boleh dimanipulasi menggunakan kaedah DOM. Sebagai contoh, jika terdapat elemen
Batasan Kanvas
Dalam Kanvas, semua grafik dilukis pada bingkai Kaedah lukisan tidak akan mengeluarkan elemen grafik yang dilukis sebagai nilai pulangan dan js tidak boleh mendapatkan elemen grafik yang dilukis. Contohnya:
cvs = document.getElementById( 'mycanvas' );
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
konsol .log( theRect); //undefined
Kod ini melukis segi empat tepat dalam teg kanvas Pertama sekali, anda dapat melihat bahawa kaedah tepat untuk melukis grafik tidak mempunyai nilai pulangan. Jika anda membuka alat pembangun penyemak imbas, anda juga boleh melihat bahawa tiada kandungan telah ditambahkan di dalam teg kanvas, dan elemen kanvas serta konteks semasa yang diperoleh dalam js tidak mempunyai sebarang kandungan yang menunjukkan grafik baharu.
Jadi, kaedah DOM yang biasa digunakan pada bahagian hadapan tidak boleh digunakan dalam kanvas. Sebagai contoh, jika anda mengklik pada segi empat tepat dalam Kanvas di atas, anda sebenarnya akan mengklik pada keseluruhan elemen Kanvas.
Ikat peristiwa pada elemen Kanvas
Memandangkan acara itu hanya boleh mencapai tahap elemen Kanvas, jika anda ingin pergi lebih jauh dan mengenal pasti grafik di dalam Kanvas tempat klik berlaku, anda perlu menambah kod untuk pemprosesan. Idea asas ialah: mengikat acara pada elemen Kanvas Apabila peristiwa itu berlaku, semak kedudukan objek acara, dan kemudian semak grafik yang meliputi kedudukan itu. Sebagai contoh, dalam contoh di atas, segi empat tepat telah dilukis, yang meliputi julat 10-110 pada paksi-x dan 10-110 pada paksi-y. Selagi tetikus diklik dalam julat ini, ia boleh dianggap sebagai mengklik pada segi empat tepat dan peristiwa klik yang perlu diproses oleh segi empat tepat boleh dicetuskan secara manual. Idea ini sebenarnya agak mudah, tetapi pelaksanaannya masih agak rumit. Bukan sahaja kecekapan proses penghakiman ini perlu dipertimbangkan, tetapi jenis peristiwa juga perlu dinilai semula di beberapa tempat, dan mekanisme penangkapan dan menggelegak di dalam Kanvas mesti ditakrifkan semula.
Perkara pertama yang perlu dilakukan ialah mengikat acara pada elemen Kanvas Contohnya, jika anda ingin mengikat acara klik pada grafik di dalam Kanvas, anda perlu memproksi acara tersebut melalui elemen Kanvas:
cvs = document.getElementById( 'mycanvas' );
cvs.addEventListener('klik', fungsi(e){
//...
}, palsu);
Seterusnya, anda perlu menentukan lokasi objek peristiwa berlaku Atribut layerX dan layerY bagi objek acara e mewakili koordinat dalam sistem koordinat dalaman Kanvas. Walau bagaimanapun, Opera tidak menyokong atribut ini dan Safari merancang untuk mengalih keluarnya, jadi kami perlu membuat beberapa kaedah penulisan yang serasi:
fungsi getEventPosition(ev){
var x, y;
jika (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} lain jika (ev. offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
kembali {x: x, y: y};
}
//Nota: Untuk menggunakan fungsi di atas, anda perlu menetapkan kedudukan elemen Kanvas kepada mutlak.
Sekarang kita mempunyai kedudukan koordinat objek acara, kita perlu menentukan grafik dalam Kanvas yang meliputi koordinat ini.
kaedah isPointInPath
Kaedah isPointInPath Canvas boleh menentukan sama ada grafik konteks semasa meliputi koordinat tertentu, seperti:
cvs = document.getElementById( 'mycanvas' );
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath (50, 50); //true
ctx.isPointInPath(5, 5);
Seterusnya, tambahkan pertimbangan acara untuk menentukan sama ada peristiwa klik berlaku pada segi empat tepat:
cvs.addEventListener('click ', fungsi (e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//Mengklik segi empat tepat
}
}, palsu );
Di atas ialah kaedah asas untuk mengendalikan peristiwa Canvas, tetapi kod di atas mempunyai had Memandangkan kaedah isPointInPath hanya menentukan laluan dalam konteks semasa, apabila berbilang grafik telah dilukis dalam Kanvas, hanya Acara boleh dinilai berdasarkan konteks grafik terakhir, contohnya:
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20); //true
ctx.beginPath();
ctx.rect(110, 110, 100 , 100);
ctx.stroke();
ctx.isPointInPath(150, 150); //true
ctx.isPointInPath(20, 20); //false
Seperti yang anda lihat daripada kod di atas, kaedah isPointInPath hanya boleh mengenal pasti laluan grafik dalam konteks semasa dan laluan yang dilukis sebelum ini tidak boleh dinilai secara retrospektif. Penyelesaian kepada masalah ini ialah: apabila peristiwa klik berlaku, lukis semula semua grafik dan gunakan kaedah isPointInPath untuk setiap satu yang dilukis untuk menentukan sama ada koordinat acara berada dalam liputan grafik.
Cat semula gelung dan acara menggelegak
Untuk mencapai lukisan semula kitaran, parameter asas grafik mesti disimpan terlebih dahulu:
arr = [
{x:10, y:10, lebar:100, tinggi:100},
{x:110, y: 110, lebar: 100, tinggi:100}
];
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
draw( );
function draw(){
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v){
ctx. beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
});
}
Kod di atas menyimpan parameter asas dua segi empat tepat setiap kali kaedah cabutan dipanggil, parameter asas ini akan dipanggil dalam gelung untuk melukis dua segi empat tepat. Kaedah clearRect juga digunakan di sini untuk mengosongkan kanvas semasa melukis semula. Perkara seterusnya yang perlu dilakukan ialah menambah perwakilan acara dan menggunakan kaedah isPointInPath pada setiap konteks semasa melukis semula:
cvs.addEventListener('click ', fungsi (e){
p = getEventPosition(e);
draw(p);
}, false);
Apabila peristiwa berlaku, lulus koordinat objek acara untuk melukis kaedah pemprosesan. Beberapa perubahan kecil perlu dibuat pada kaedah cabutan di sini:
cabutan fungsi(p){
var who = [];
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v, i){
ctx.beginPath( );
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
if(p && ctx.isPointInPath(p.x, p.y)){
// Jika koordinat peristiwa dihantar masuk, gunakan isPointInPath untuk menentukan
//Jika persekitaran semasa meliputi koordinat, letakkan nilai indeks persekitaran semasa ke dalam tatasusunan
who.push(i);
}
});
//Mengikut nilai indeks dalam tatasusunan, elemen yang sepadan boleh ditemui dalam tatasusunan arr.
kembalikan siapa;
}
Dalam kod di atas, apabila peristiwa klik berlaku, kaedah cabutan akan melakukan lukisan semula, dan semasa proses lukisan semula, semak sama ada setiap grafik merangkumi koordinat acara Jika penghakiman itu benar, grafik itu dianggap diklik , dan Letakkan nilai indeks grafik ke dalam tatasusunan, dan akhirnya gunakan tatasusunan sebagai nilai pulangan kaedah cabutan. Di bawah mekanisme pemprosesan ini, jika terdapat N grafik dalam Kanvas, sebahagian daripadanya bertindih dan peristiwa klik berlaku dalam kawasan bertindih ini, maka akan terdapat N ahli dalam tatasusunan kembali kaedah cabutan. Pada masa ini, ia agak serupa dengan situasi acara menggelegak Ahli terakhir tatasusunan berada di bahagian atas Kanvas, dan ahli pertama berada di bahagian bawah , dan ahli lain ialah e.sasaran Nod dihantar ke semasa proses gelembung. Sudah tentu, ini hanyalah kaedah pemprosesan yang paling mudah Jika anda benar-benar ingin mensimulasikan pemprosesan DOM, anda perlu menetapkan hubungan ibu bapa-anak untuk grafik.
Di atas ialah kaedah asas pengendalian acara Canvas. Dalam aplikasi sebenar, cara untuk cache parameter grafik, cara melakukan lukisan semula gelung, dan cara mengendalikan acara menggelegak semuanya perlu ditangani mengikut situasi sebenar. Di samping itu, klik ialah peristiwa yang agak mudah dikendalikan Peristiwa yang agak menyusahkan ialah alih tetikus, keluar tetikus dan gerakan tetikus Memandangkan sebaik sahaja tetikus memasuki elemen Kanvas, peristiwa gerakan tetikus sentiasa berlaku, jadi jika anda ingin menetapkan alih tetikus atau tetikus secara berasingan. untuk grafik tertentu, anda juga perlu merekodkan laluan pergerakan tetikus dan menetapkan status masuk dan keluar untuk grafik. Apabila langkah pemprosesan menjadi lebih kompleks, peningkatan perhatian mesti diberikan kepada isu prestasi.

Kod HTML5 terdiri daripada tag, elemen dan atribut: 1. Tag mentakrifkan jenis kandungan dan dikelilingi oleh kurungan sudut, seperti. 2. Unsur terdiri daripada tag permulaan, kandungan dan tag akhir, seperti kandungan. 3. Atribut menentukan pasangan nilai utama dalam tag permulaan, meningkatkan fungsi, seperti. Ini adalah unit asas untuk membina struktur web.

HTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.

Amalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.

Piawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.

H5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.

H5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

Alat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Dreamweaver Mac版
Alat pembangunan web visual