使用 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 的东西来开始定义游戏对象的位置和运动。