Bagaimana Saya Boleh Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas?

Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas

Menentukan koordinat klik tetikus pada elemen kanvas adalah penting untuk pelbagai aplikasi. Berikut ialah penyelesaian silang penyemak imbas yang berfungsi dalam Safari, Opera dan Firefox:

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);
});

Coretan kod ini menggunakan kaedah getBoundingClientRect() untuk mendapatkan kedudukan elemen kanvas dalam dokumen. Ia kemudian mengira koordinat x dan y klik tetikus berbanding dengan asal elemen kanvas.

Dengan menambahkan pendengar acara untuk acara turun tetikus, anda boleh menangkap klik tetikus dan mendapatkan semula koordinat menggunakan fungsi getCursorPosition. Maklumat ini boleh diproses selanjutnya untuk pelbagai tujuan, seperti manipulasi objek atau interaksi pengguna dalam elemen kanvas.

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