Rumah > masalah biasa > Di manakah koordinat tetikus kanvas?

Di manakah koordinat tetikus kanvas?

小老鼠
Lepaskan: 2023-08-22 15:08:13
asal
2871 orang telah melayarinya

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.

Di manakah koordinat tetikus kanvas?

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);
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan