Проблема проекта JavaScript canvas

Question

Так что я просто бездельничаю и хочу вычислить расстояния между положением мыши на холсте и различными частями холста (в центре, вверху справа, вверху слева и т. Д.). Тем не менее, с кодом, который у меня сейчас есть, он либо отображает «NaN», либо что-то совершенно неточное вместо реальных расстояний. Ошибок нет. Вот мой код (вероятно, он супер неэффективен, потому что я новичок в кодировании):

var Canvas = document.getElementById("Canvas");
var ctx = Canvas.getContext('2d');
var mouseX = 0;
var mouseY = 0;

//cncs stands for corners and center
var cncs = {
    "center": {
        "x": Canvas.clientWidth/2,
        "y": Canvas.clientHeight/2
    },
    "topleft": {
        "x": 0,
        "y": 0
    },
    "topright": {
        "x": Canvas.clientWidth,
        "y": 0
    },
    "bottomleft": {
        "x": 0,
        "y": Canvas.clientHeight
    },
    "bottomright": {
        "x": Canvas.clientWidth,
        "y": Cache.clientHeight
    }
} 

function update(){
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, Canvas.clientWidth, Canvas.clientHeight);
    drawText();
}
function drawText(){
    ctx.fillStyle = "white";
    ctx.font = '15pt Calibri';
    ctx.fillText("MouseX: " + mouseX + ", MouseY: " + mouseY, 0, 15);
    ctx.fillText("Distance from: ", 800 , 15);

    var centerDist = Math.floor(getDistances().center);
    ctx.fillText("Center: " + centerDist, 800, 65);

    var topleftDist = Math.floor(getDistances().topleft);
    ctx.fillText("Top Left: " + topleftDist, 800, 90);

    var toprightDist = Math.floor(getDistances().topright);
    ctx.fillText("Top Right: " + toprightDist, 800, 115);

    var bottomleftDist = Math.floor(getDistances().bottomleft);
    ctx.fillText("Bottom Left: " + bottomleftDist, 800, 140);

    var bottomrightDist = Math.floor(getDistances().bottomright);
    ctx.fillText("Bottom Right: " + bottomrightDist, 800, 165)
}
function getMousePos(e){
    var rect = Canvas.getBoundingClientRect();
    mouseX = e.clientX - rect.left;
    mouseY = e.clientY - rect.top;
}
Canvas.addEventListener('mousemove', (e) => {
    getMousePos(e);
});

function getDistances(){
    return{
       "center": Math.sqrt((cncs.center.x - mouseX)^2 + (cncs.center.y - 
  mouseY)^2),
       "topleft": Math.sqrt((cncs.topleft.x - mouseX)^2 + (cncs.topleft.y - 
mouseY)^2),
       "topright": Math.sqrt((cncs.topright.x - mouseX)^2 + (cncs.topright.y 
- mouseY)^2),
       "bottomleft": Math.sqrt((cncs.bottomleft.x - mouseX)^2 + 
(cncs.bottomleft.y - mouseY)^2),
       "bottomright": Math.sqrt((cncs.bottomright.x - mouseX)^2 + 
(cncs.bottomright.y - mouseY)^2)
    };
}

setInterval(update, 1000/60);

Answer 1

Основная проблема в том, что ^ - не возведение в степень, а бинарный оператор xor. Вы можете использовать оператор ** или Math.pow(), чтобы увеличить число до степени в JS:

  function getDistances() {
      return {
          "center": 
              Math.sqrt(
                  Math.pow(cncs.center.x - mouseX, 2) + 
                  Math.pow(cncs.center.y - mouseY, 2)
              ),
          "topleft": 
              Math.sqrt(
                  Math.pow(cncs.topleft.x - mouseX, 2) + 
                  Math.pow(cncs.topleft.y - mouseY, 2)
              ),
          "topright": 
              Math.sqrt(
                  Math.pow(cncs.topright.x - mouseX, 2) + 
                  Math.pow(cncs.topright.y - mouseY, 2)
              ),
          "bottomleft": 
              Math.sqrt(
                  Math.pow(cncs.bottomleft.x - mouseX, 2) + 
                  Math.pow(cncs.bottomleft.y - mouseY, 2)
              ),
          "bottomright": 
              Math.sqrt(
                  Math.pow(cncs.bottomright.x - mouseX, 2) + 
                  Math.pow(cncs.bottomright.y - mouseY, 2)
              )
      };
  }

Помимо этого, Cache.clientHeight должно быть Canvas.clientHeight. Наконец, этот код страдает от функций, которые полагаются на глобальные переменные и многократные дорогостоящие вычисления. Я рекомендую использовать параметры функции, чтобы увеличить инкапсуляцию, сделать функции многократно используемыми и избежать повторения. Например, добавление параметров к getDistances() приводит к:

const getDistance = (ax, ay, bx, by) => ((ax - bx) ** 2 + (ay - by) ** 2) ** 0.5;

И назовите это с помощью:

getDistance(cncs.center.x, cncs.center.y, mouseX, mouseY);