使用 console.log() 从 HTML Canvas 检测形状、图像和鼠标溢出；

Question

我正在测试 HTML标签以在我的网站内为Games4Change<canvas></canvas>创建一个香草 JavaScript 游戏。

当我使用 测试画布的宽度和高度时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，您可以使该区域更小以考虑对象的大小，因此当边缘或角落退出画布时，它会记录“我在外面”。我建议检查类似 vector.js 的东西来开始定义游戏对象的位置和运动。