在不影响游戏坐标的情况下居中画布元素答案

【问题标题】：Center a canvas element without affecting coordinates for game在不影响游戏坐标的情况下居中画布元素
【发布时间】：2021-05-03 16:46:38
【问题描述】：

我有一个在 HTML5 画布上编码的游戏，我将画布居中，但现在它与我的事件监听器的 event.clientX 和 event.clientY 中的坐标混淆了，我有点击，我尝试改变document.addEventListener 到 canvas.addEventlistener，但它什么也没做。有什么建议么？我的代码在这里-

var canvas = document.getElementById('infRunnerCanvas');
var ctx = canvas.getContext('2d');
var playingGame = false;
function displayMainMenu(){
ctx.font = '35px Comic Sans Ms';
ctx.textAlign = 'center'
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillText('1 button run!',canvas.width/2, 200);
ctx.font = '15px Comic Sans Ms';
ctx.fillText("Any key or click the screen to jump, don't hit the side of a platform.", canvas.width/2, 250)
ctx.fillRect(275,300 , 150, 60)
ctx.fillStyle = 'black';
ctx.font = '25px Comic Sans Ms';
ctx.fillText('PLAY', 350, 340);
}
displayMainMenu();

function handleClicks(){
if(playingGame === false && event.clientX > 275 && event.clientX < 425 && event.clientY > 300 && event.clientY < 360){
alert()  
}
}
canvas.addEventListener('click', handleClicks)

<!DOCTYPE html>
<html>
  <div style = 'text-align: center;'>
 <canvas width = '700' height = '500' id = 'infRunnerCanvas' > sorry, looks like your browser doesn't support the canvas element. </canvas>
 </div>
 <script src = 'script.js'> </script>
</html>

【问题讨论】：

你能解释更多吗？一切看起来都很好。我在 (100, 100) 处添加了一个 fillRect，它出现在它应该出现的位置。搞乱坐标到底是什么意思？
事件侦听器的坐标很有趣，将播放按钮的坐标放入 handleClicks 函数不起作用，它认为坐标指的是甚至不在画布上的点。还有，你用的是整页吗？
来自文档“MouseEvent 接口的 clientX 只读属性提供了事件发生的应用程序视口内的水平坐标（与页面内的坐标相对）。”
那还有什么我可以用的吗？
如果下面的答案没有意义，请告诉我。控制台记录 canvas.getBoundingClientRect() 后，您将看到 x 和 y 位置。这就是您将从鼠标中减去的内容。

标签： javascript html html5-canvas

【解决方案1】：

您需要通过在画布上使用 getBoundingClientRect() 并从鼠标位置中减去这些值来计算画布位置。

var canvas = document.getElementById('infRunnerCanvas');
var ctx = canvas.getContext('2d');
canvas.width = 700;
canvas.height = 500;
var playingGame = false;

let mouse = {
  x: null,
  y: null,
};

function handleClicks(){
  if(playingGame === false && mouse.x > 275 && mouse.x < 425 && mouse.y > 300 && mouse.y < 360){
      alert()  
  }
}

window.addEventListener('click', function(e) {
  mouse.x = e.x - canvas.getBoundingClientRect().x;
  mouse.y = e.y - canvas.getBoundingClientRect().y;
  handleClicks();
})

window.addEventListener('resize', function(e) {
  displayMainMenu();
})

function displayMainMenu(){
ctx.fillStyle = 'black'
ctx.font = '35px Comic Sans Ms';
ctx.textAlign = 'center'
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillText('1 button run!',canvas.width/2, 200);
ctx.font = '15px Comic Sans Ms';
ctx.fillText("Any key or click the screen to jump, don't hit the side of a platform.", canvas.width/2, 250)
ctx.fillRect(275, 300, 150, 60)
ctx.fillStyle = 'black';
ctx.font = '25px Comic Sans Ms';
ctx.fillText('PLAY', 350, 340);
}
displayMainMenu();

canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 700px;
  height: 500px;
  transform: translate(-50%, 0)
}

<!DOCTYPE html>
<html>
  <div style = 'text-align: center;'>
 <canvas id = 'infRunnerCanvas' > sorry, looks like your browser doesn't support the canvas element. </canvas>
 </div>
 <script src = 'script.js'> </script>
</html>

运行这个，你会看到console.log(canvas.getBoundingClientRect())

【讨论】：