Masalah dengan tidak mendapat koordinat tetikus yang tepat: menggunakan kanvas HTML5 apabila mengubah saiz halaman

Question

Saya mahu mencipta Pixel Effect ini daripada pakar bahagian hadapan.

Walaupun saya dapat mencapai keseluruhan kesan piksel pada kanvas skrin penuh:

const canvas = getElementById('canvas');

canvas.height = window.innerHeight; // 给画布设置全屏高度
canvas.width= window.innerWidth; // 给画布设置全屏宽度

Dan mudah untuk mendapatkan koordinat tetikus

const mouse = {
  x: undefined,
  y: undefined
}
canvas.addEventListner('mousemove', function(e) {
  mouse.x = e.x;
  mouse.y = e.y;
}

Pada ketika ini, lebar dan ketinggian kanvas adalah sama dengan dokumen, jadi mudah untuk mendapatkan koordinat tepat tetikus. Tetapi apabila saya cuba menggunakan dimensi ketepatan 800px. Terdapat juga beberapa isu yang berkaitan dengan mengubah saiz.

Saya ingin tahu cara mengekalkan ketepatan tetikus.

Terima kasih banyak atas bantuan anda.

Answer 1

Saya percaya bahawa apabila anda menggunakan e.x dan e.y, walaupun digunakan dalam pendengar acara kanvas, mereka mengembalikan koordinat tetikus berbanding piksel kiri atas keseluruhan halaman, bukan hanya koordinat kanvas. Jika dengan "kacau" anda bermaksud kesan piksel diimbangi dalam beberapa arah tetap tidak kira di mana anda mengklik, maka ini mungkin masalah anda dan anda harus menggantikan e.x dan e.y dengan e.clientX dan e.clientY . "klien" dalam e.clientX merujuk kepada elemen yang disasarkan oleh pendengar dan menentukan bahawa koordinat acara diberikan relatif kepada elemen dan bukannya halaman. Jika soalan itu timbul dengan cara lain, maka saya rasa saya tidak mempunyai jawapannya.