Обнаружение форм, изображений и переполнения мыши из HTML Canvas с console.log (); (Ваниль JavaScript)

Question

Я тестирую теги HTML <canvas></canvas>, чтобы создать ванильную JavaScript игру для Games4Change на моем веб-сайте.

Когда я проверял ширину и высоту холста с помощью ctx.fillRect(955, 0, 5, 5);, мне было интересно, как я могу обнаружить JavaScript фигур, используя console.log();, так как их обводка / граница переполняется или выходит за пределы границы HTML <canvas></canvas> границы.

Кроме того, мне интересно, как я мог бы JavaScript обнаружить изображения и их границы, переполняющие границу HTML <canvas></canvas>, используя console.log();, так как я будет переключаться на изображения для моей игры вместо фигур.

Кроме того, как заставить Javascript определять, находится ли курсор мыши за пределами HTML <canvas></canvas>, используя console.log();?

HTML

<canvas class="center" id="gameCanvas"></canvas>

CSS

#gameCanvas {
    width: 960px;
    height: 480px;
    border: 5px solid rgba(52,52,52,1.00);/**
    background-color: rgba(241,213,179,1.00);**/
}

Ваниль JavaScript

//Gets the html canvas that displays the game and allows art/rendering of the game in 2 dimensional plane.
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");

// Determine the size the canvas is being displayed
   var width = canvas.clientWidth;
   var height = canvas.clientHeight;


console.log(canvas.clientWidth);
console.log(canvas.clientHeight);


//Clears all content everytime the game is reloaded by frame of the rectangular screen.
ctx.clearRect(0, 0, 960, 480);

ctx.fillStyle = "#FF0000";
ctx.fillRect(955, 0, 5, 5);

Answer 1

после объявления холста:

canvas.addEventListener("mouseout", console.log("mouse out"), false);

- это все, что вам нужно знать, чтобы мышь была над холстом, а затем оставлена.

для определения объектов внутри элемента холста это немного больше хитро, но по сути вам нужно что-то, что отслеживает ширину и высоту этого объекта (например, координаты x и y). затем вы можете проверить, находится ли это местоположение за пределами вашего жестко определенного размера холста, например:

if ((location.x < 0 || location.x > 960) || (location.y < 0 || location.y > 480)) {
console.log("i am outside");
}

вместо 0 и 960, конечно, вы можете уменьшить эту область, чтобы учесть размер объект, поэтому вместо этого он регистрирует «я снаружи», когда даже край или угол выходит из холста.

Я бы предложил проверить что-то вроде вектора. js, чтобы начать определять местоположение и движение для игровых объектов.