Bagaimana untuk Menambah Pengendali Acara onClick pada Elemen Kanvas dalam JavaScript?

Cara Melampirkan Acara onClick pada Elemen Kanvas

Pengenalan:

Elemen Kanvas menyediakan cara yang berkuasa untuk melukis dan memanipulasi grafik pada halaman web. Walau bagaimanapun, menambah pengendali acara pada elemen kanvas boleh menjadi rumit untuk pemula. Artikel ini akan menunjukkan cara menambahkan pengendali acara onClick yang ringkas pada elemen kanvas.

Masalah:

Pemaju Java yang berpengalaman menghadapi kesukaran menambah pengendali acara onClick ke elemen kanvas dalam JavaScript. Berbilang percubaan telah gagal, termasuk menggunakan sifat onclick, menetapkan fungsi dan menetapkan sifat itu kepada rentetan.

Penyelesaian:

Apabila melukis pada elemen kanvas, elemen itu sendiri tidak mempunyai sebarang perwakilan selain piksel dan warnanya. Oleh itu, untuk mengesan klik pada elemen, anda perlu menangkap peristiwa klik pada elemen HTML kanvas dan menggunakan pengiraan matematik untuk menentukan elemen yang diklik.

Untuk menambah acara klik pada elemen kanvas, gunakan perkara berikut sintaks:

canvas.addEventListener('click', function() { }, false);

Untuk menentukan elemen yang diklik, gunakan yang berikut kod:

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for 'click' events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
});

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});

Penjelasan:

Kod ini melampirkan acara klik pada elemen kanvas dan menambahkan satu elemen pada tatasusunan elemen. Kod bergelung melalui elemen, membandingkan koordinat klik dengan koordinat elemen dan memberi amaran jika klik berlaku pada elemen.

Sebab Percubaan Gagal:

• Menetapkan nilai pulangan alert() kepada sifat onClick menggunakan fungsi alert() serta-merta.
• Penugasan rentetan pada sifat onClick tidak melampirkan pengendali acara.
• Menggunakan sifat onclick kuno adalah sensitif huruf besar dan boleh hilang semasa penyirian.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Pengendali Acara onClick pada Elemen Kanvas dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!