Bagaimanakah Saya Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas dalam JavaScript?

Mendapatkan semula Koordinat Klik Tetikus pada Elemen Kanvas

Soalan ini berkisar tentang mendapatkan koordinat tepat klik tetikus berbanding elemen kanvas. Untuk penyemak imbas moden seperti Safari, Opera dan Firefox, penyelesaian yang diperkemas wujud yang menghalang keperluan untuk jQuery.

Kod JavaScript yang disediakan menawarkan pendekatan yang fasih untuk tugas ini:

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}

const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e);
});

Ini kod cekap menangkap kedudukan klik tetikus dengan memanfaatkan kaedah getBoundingClientRect() dan mengira koordinat x dan y relatif. Panggilan console.log() memaparkan koordinat ini, memberikan petunjuk yang jelas tentang lokasi klik dalam elemen kanvas.

Atas ialah kandungan terperinci Bagaimanakah Saya Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!