Di manakah koordinat tetikus kanvas?

Cara untuk mendapatkan koordinat tetikus dalam kanvas: 1. Buat fail sampel JavaScript 2. Dapatkan rujukan kepada elemen Canvas dan tambahkan pendengar untuk acara pergerakan tetikus 3. Apabila tetikus bergerak pada Kanvas, fungsi getMousePos akan dicetuskan; 4. . Gunakan kaedah "getBoundingClientRect()" untuk mendapatkan maklumat kedudukan dan saiz elemen Canvas, dan dapatkan koordinat tetikus melalui event.clientX dan event.clientY.

Persekitaran pengendalian tutorial ini: Sistem Windows, komputer Dell G3.

Kanvas ialah elemen dalam HTML5 yang digunakan untuk melukis grafik, animasi dan kesan visual lain pada halaman web. Tidak seperti elemen HTML lain, Canvas tidak mempunyai sistem koordinat sendiri. Ia menggunakan sistem koordinat halaman web, iaitu sistem koordinat dengan sudut kiri atas sebagai asal.

Dalam Kanvas, kedudukan koordinat tetikus adalah relatif kepada kedudukan koordinat keseluruhan halaman web. Apabila tetikus bergerak pada Kanvas, kedudukan koordinat tetikus boleh diperolehi melalui acara mendengar.

Pertama, kita perlu menambah pendengar untuk acara pergerakan tetikus di Kanvas. JavaScript boleh digunakan untuk mencapai fungsi ini. Berikut ialah contoh kod:

javascript
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  console.log("鼠标坐标：x=" + x + ", y=" + y);
}

Dalam kod di atas, kami mula-mula mendapatkan rujukan kepada elemen Kanvas dan menambah pendengar untuk acara pergerakan tetikus. Apabila tetikus bergerak pada Kanvas, fungsi getMousePos dicetuskan.

Dalam fungsi getMousePos, kami mula-mula menggunakan kaedah getBoundingClientRect() untuk mendapatkan maklumat kedudukan dan saiz elemen Canvas. Kemudian, dapatkan kedudukan koordinat tetikus berbanding keseluruhan halaman web melalui event.clientX dan event.clientY. Akhir sekali, kedudukan koordinat tetikus berbanding Kanvas diperoleh dengan menolak koordinat penjuru kiri atas unsur Kanvas, iaitu, rect.left dan rect.top.

Dalam kod di atas, kami menggunakan fungsi console.log() untuk mengeluarkan kedudukan koordinat tetikus ke konsol penyemak imbas. Anda juga boleh menggunakan kedudukan koordinat untuk operasi lain seperti yang diperlukan, seperti melukis grafik atau melakukan animasi.

Ringkasnya, koordinat tetikus Kanvas adalah relatif kepada kedudukan koordinat keseluruhan halaman web. Melalui pendengar acara dan beberapa pengiraan, kita boleh mendapatkan kedudukan koordinat tetikus pada Kanvas dan menggunakannya untuk mencapai pelbagai kesan interaktif.

Atas ialah kandungan terperinci Di manakah koordinat tetikus kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!