个人中心
gpt4 book ai didi

javascript - 什么可能导致我的 Canvas 游戏中鼠标位置出现这种偏移？

转载 作者：行者123 更新时间：2023-12-04 07:47:48 40 4
gpt4 key购买 nike

我目前正在创建一个最终项目，它应该类似于经典的可怕迷宫游戏。我正在使用 Vanilla JS 和 HTML5 Canvas，并且不想使用外部库或框架。鼠标的位置和应该跟随它的矩形之间有很大的偏移。似乎随着我离屏幕左 Angular 越远，偏移量就越大。一探究竟:
https://github.uconn.edu/pages/ssw19002/dmd-3475/final-project/maze-page-1.html
如果有人有任何可能导致这种情况的原因，请告诉我!我是新来的 <canvas> .

最佳答案

所以这里的问题实际上根本不在于 Javascript，而在于 CSS。
在 CSS 中，您将 Canvas 的宽度设置为占据容器的 100%，并根据宽度自动缩放高度。

canvas {
    border: 1px solid black;
    background-color: black;
    width: 100%;
    height: auto;
    margin: 0;
    display: inline;
    /* cursor: none; */
}
但是，在您的 JS 中，您告诉脚本 Canvas 的宽度正好为 1600 像素，高度为 1400 像素。这会使事件监听器根据它从 1600x1400 返回的数字而不是 CSS 中设置的实际大小混淆。 
var canvas = document.querySelector('canvas');

// returning a drawing context to a variable 'c'
// allows you to draw 2d elements
var c = canvas.getContext('2d');

canvas.width = 1600;
canvas.height = 1400;
canvas.style.width = 1600;
canvas.style.height = 1400;
要解决此问题，您只需将 Canvas 设置为固定大小，或者在页面加载时读取大小并在每次重新加载页面时更新数字。下面是第一个可能的解决方案的示例。请注意，该示例没有考虑与滚动偏移相关的问题。 

var canvas = document.querySelector('canvas');

  // returning a drawing context to a variable 'c'
  // allows you to draw 2d elements
  var c = canvas.getContext('2d');

    canvas.width = 1600;
    canvas.height = 1400;
    canvas.style.width = 1600;
    canvas.style.height = 1400;
    
///----------------------------------------------------

var canvasPos = getPosition(canvas);

var mouseX = 0;
var mouseY = 0;

var mouseWidth = 30;
var mouseHeight = 30;
 
canvas.addEventListener("mousemove", setMousePosition);
 
function setMousePosition(e) {  
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
}   

function update() {

  c.clearRect(0, 0, canvas.width, canvas.height);

  //1. create landscapes
    // a. Maze (blue region)
    c.beginPath();
    c.moveTo(150, 1300); //start
    c.lineTo(150, 400);
    c.lineTo(1350, 400);
    c.lineTo(1350, 450);
    c.lineTo(700, 450);
    c.lineTo(700, 1300);
    c.lineTo(150, 1300);
    c.fillStyle = "#C1EEFF";
    c.fill();

    //Red region
    c.beginPath();
    c.moveTo(1350, 400);
    c.lineTo(1350, 450);
    c.lineTo(1300, 450);
    c.lineTo(1300, 400);
    c.moveTo(1350, 400);
    c.fillStyle = "#FF4000";
    c.fill();

  //2. create cursor
  c.beginPath();
  c.rect(mouseX, mouseY, mouseWidth, mouseHeight);
  c.fillStyle = "#928C6F";
  c.fill();

  // console.log(mouseX, mouseY);
  requestAnimationFrame(update);
}

canvas.addEventListener("mousemove", update());

function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;
 
  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}
h1 {
    text-align: center;
  }
  
  canvas {
    border: 1px solid black;
    background-color: black;
    
    
    /* HERE'S WHERE THE CHANGE IS BEING MADE */ 
    /* width: 100%; */
    /* height: auto; */
    
    
    margin: 0;
    display: inline;
    /* cursor: none; */
  }
  
  .container {
    text-align: center;
    margin: 0;
    /* display: flex;
    justify-content: center; */
  }
  
  body {
    margin: 0;
    max-width: 1000px;
    background-color: #6d72c3;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="maze.css">
    <title>Maze Game</title>
    </head>


    <body>
      <div class="container">
        <canvas></canvas>
      </div>

      <script src = "maze.js"></script>
    </body>
</html>

关于javascript - 什么可能导致我的 Canvas 游戏中鼠标位置出现这种偏移？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67134588/

40 4 0
文章推荐： javascript - 使用多个组件重用导航栏组件
文章推荐： python - Pygame 创建无限数量的敌人
文章推荐： forms - VBScript 找不到 WindowSystemObject 类，错误代码 80020009(Windows 10、20H2)
文章推荐： javascript - 为什么我的 ReactJs 循环下拉列表会自动调用多次
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com