Pixi.js 应用程序不会完全填满屏幕

Question

我正在使用 pixi.js 开发游戏，但无法让应用程序填满整个屏幕。我看到this tutorial 并将resize 方法添加到我的代码中，但是当它被调用时，它会在应用程序周围留下一个5 到10 像素的小边框。我也尝试过使用 position: absolute ，然后删除底部和右侧的边框，而不是顶部和左侧的边框。我无法让它在我的一生中调整到屏幕的左上角。我的代码如下：

我希望我正确插入了它，但是正如您在输入名称并按下播放后所看到的那样，它不会填满整个屏幕并在顶部和左侧留下空隙。如果您能提供帮助，请告诉我 - 谢谢！

//Instance Variables
var currentGame;

//Input Variables
var mouse = {};
var keyUp = false;
var keyDown = false;
var keyLeft = false;
var keyRight = false;

//Add button listener and key inputs when page loads
window.onload = function() {
  id("play-btn").addEventListener("click", play);
  setupInputs();
}

//Verify correct name and start
function play() {
  let name = id("name-input").value;
  if (name === "Enter name" || name === "") {
    error("Please enter a name.");
  } else if (name.length < 3) {
    error("Name must be at least 3 characters.");
  } else if (name.length > 20) {
    error("Name must be shorter than 21 characters.");
  } else {
    startGame(name);
  }
}

//Hide menu div, show game div, and create game object
function startGame(name) {
  hide(id("menu-div"));
  currentGame = new Game(name);
  id("game-div").appendChild(currentGame.app.view);
  resize(currentGame.app);
  window.addEventListener("resize", function() {
    resize(currentGame.app);
  });
  show(id("game-div"));
}

function Game() {
  this.app = new PIXI.Application({
    autoResize: true,
    resolution: devicePixelRatio,
    backgroundColor: 0x000000
  });
}

function resize(app) {
  app.renderer.resize(window.innerWidth + 30, window.innerHeight + 30);
}

function hide(element) {
  element.classList.add("hidden");
  for (let i = 0; i < element.children.length; i++) {
    hide(element.children[i]);
  }
}

function show(element) {
  element.classList.remove("hidden");
  for (let i = 0; i < element.children.length; i++) {
    show(element.children[i]);
  }
}

function error(message) {
  id("name-input").value = "Enter name";
  id("error-text").textContent = message;
  id("error-text").classList.remove("hidden");
}

//Setup player inputs
function setupInputs() {
  document.addEventListener("mousemove", function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
  });
  document.addEventListener("mousedown", function(event) {
    if (event.button === 0) {
      mouse.left = true;
    } else if (event.button === 2) {
      mouse.right = true;
    }
  });
  document.addEventListener("mouseup", function(event) {
    if (event.button === 0) {
      mouse.left = false;
    } else if (event.button === 2) {
      mouse.right = false;
    }
  });
  document.addEventListener("keydown", function(event) {
    if (event.key === "Escape") {

    }
    if (event.key === "w" || event.key === "ArrowUp") {
      keyUp = true;
    }
    if (event.key === "a" || event.key === "ArrowLeft") {
      keyLeft = true;
    }
    if (event.key === "s" || event.key === "ArrowDown") {
      keyDown = true;
    }
    if (event.key === "d" || event.key === "ArrowRight") {
      keyRight = true;
    }
  });
  document.addEventListener("keyup", function(event) {
    if (event.key === "w" || event.key === "ArrowUp") {
      keyUp = false;
    }
    if (event.key === "a" || event.key === "ArrowLeft") {
      keyLeft = false;
    }
    if (event.key === "s" || event.key === "ArrowDown") {
      keyDown = false;
    }
    if (event.key === "d" || event.key === "ArrowRight") {
      keyRight = false;
    }
  });
}


// Helper Functions
function id(id) {
  return document.getElementById(id);
}

function qs(selector) {
  return document.querySelector(selector);
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

body {
  background-color: darkgreen;
  overflow: hidden;
}

#menu-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#menu-title {
  text-align: center;
  margin-bottom: 200px;
}

#menu-middle {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 30%;
  height: 30%;
}

#play-btn {
  font-size: 35pt;
  margin-top: 50px;
  margin-bottom: 20px;
}

#name-input {
  font-size: 35pt;
}

#error-text {
  color: red;
  font-size: 20pt;
}

#game-div {
  border: 1px solid red;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  cursor: none;
}

canvas {
  display: block;
}

.hidden {
  display: none;
}

<script src="https://pixijs.download/v4.5.5/pixi.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>title</title>
  <link rel="icon" href="data:,">
  <link rel="stylesheet" href="styles.css">
  <script src="js/pixi.min.js"></script>
  <script src="js/index.js"></script>
  <script src="js/game.js"></script>
</head>

<body>
  <div id="menu-div">
    <div id="menu-title">
      <img src="assets/title.png" alt="title">
    </div>
    <div id="menu-middle">
      <input id="name-input" value="Enter name">
      <button id="play-btn">Play!</button>
    </div>
    <p id="error-text" class="hidden"></p>
  </div>
  <div id="game-div" class="hidden">

  </div>
</body>

</html>

Answer 1

使用 CSS 的 object-fit：

canvas {
    object-fit: cover
}