Анимация холста JS не находит правильные позиции мыши со смещением ⇐ Javascript

[Anonymous]

Я создал холст с анимацией частиц. Анимации работают нормально. Однако минимальное и максимальное значения оси Y немного выходят за рамки.

Частицы должны уйти с пути мыши. Это отлично работает в верхнем левом углу, где координаты равны 0,0. Однако по мере того, как я перемещаюсь в правый нижний угол, область холста, на которую кажется, что на нее наведен указатель мыши, становится все дальше от фактического положения мыши. Он отстает примерно на 250 пикселей.

Из-за этого, когда я пытаюсь применить смещение к мыши, один угол холста становится лучше, а другой хуже.

Я добавил несколько точек в точных позициях и центральную линию, просто чтобы убедиться, что я делаю хоть что-то правильно. и все они появляются в правильном положении. Даже после изменения размера экрана.

Тот факт, что моя анимация выходит за пределы оси Y, заставляет меня думать, что холст каким-то образом растягивается и это приводит к перемещению мыши. Однако странно, что в точке 0,0 таких проблем нет, и чем дальше, тем хуже.

Я сделал ссылку для кода https://codepen.io/tomsilhouette/pen/poqaJRB Кажется, с пером кода лучше, поэтому я думаю, что это во многом связано с размерами контейнеров.

const Canvas = document.getElementById('canvasInt'); console.log('холст', холст); const ctx = Canvas.getContext('2d'); console.log('ctx', ctx); холст.ширина = окно.внутренняя ширина; холст.высота = окно.внутренняяВысота; пусть частицыArray; пусть мышь = { х: ноль, y: ноль, радиус: (холст.высота / 150) * (холст.ширина / 150), }; пусть redCircleSize = 15; // Отрегулируйте размер красного круга по мере необходимости функция drawRedCircle() { ctx.beginPath(); ctx.arc(1, 1, redCircleSize, 0, Math.PI * 2, ложь); ctx.arc(canvas.width, Canvas.height, redCircleSize, 0, Math.PI * 2, false); ctx.arc(canvas.width/2, Canvas.height/2, redCircleSize, 0, Math.PI * 2, false); ctx.fillStyle = 'красный'; // Устанавливаем красный цвет заливки ctx.fill(); } Canvas.addEventListener('mousemove', function (e) { // Получаем позицию элемента холста вар CanvasRect = Canvas.getBoundingClientRect(); console.log("canvasRect", CanvasRect) console.log("MOVEEEEEee", e) // Вычисляем координаты мыши относительно холста вар mouseX = e.clientX - CanvasRect.left; вар mouseY = e.clientY - CanvasRect.top; // Обновляем объект мыши относительными координатами мышь.х = мышьХ; мышь.y = мышьY; console.log("CANVASSSS", холст.ширина, холст.высота); console.log("Координаты мыши относительно холста:", mouseX, mouseY); }); класс Частица { конструктор(x, y, направлениеX, направлениеY, размер, цвет) { это.х = х; это.у = у; this.directionX = направлениеX; this.directionY = направлениеY; this.size = размер; this.color = цвет; } // рисуем каждую частицу рисовать() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false); ctx.fillStyle = `#8C5523`; ctx.fill(); } // проверяем положение частицы обновлять() { // проверяем, находится ли частица на холсте if (this.x > Canvas.width || this.x < 0) { это.направлениеX = -это.направлениеX; } if (this.y > Canvas.height || this.y < 0) { это.направлениеY = -это.направлениеX; } // проверка на коллизию пусть dx = mouse.x - this.x; пусть dy = mouse.y - this.y; пусть расстояние = Math.sqrt(dx * dx + dy * dy); if (расстояние < mouse.radius + this.size) { if (mouse.x < this.x && this.x < Canvas.width - this.size * 10) { это.х += 10; } if (mouse.x > this.x && this.x > this.size * 10) { это.х -= 10; } if (mouse.y < this.y && this.y < Canvas.height - this.size * 10) { это.у += 10; } if (mouse.y > this.y && this.y > this.size * 10) { это.у -= 10; } } // двигаться это.х += это.направлениеX; this.y += this.directionY; // рисовать это.рисовать(); } } // создаем массив частиц функция инициализации() { частицыArray = []; пусть NumberOfParticles = (canvas.height * Canvas.width) / 8000; for (let i = 0; i