javascript - p5 Canvas 重新居中

Question

我正在开发一款障碍游戏，类似于 chrome 恐龙游戏或几何冲刺游戏，但我在 CSS 方面遇到了一些问题。

我的第一个问题:我试图将 Canvas 水平和垂直居中到屏幕中间。这是我的代码，仅适用于全屏页面:

html, body {
  
  margin: 0;
  padding: 0;
  align-items: center;
  display: flex;
  
}
canvas {
  
  position: absolute;
  top: 25%;
  left: 10%;
  display: block;
  border: 15px solid #edce00;   
  border-radius: 30px;
  align-items: center;
  display: flex;
  
}

以下是全屏页面与更改页面大小的对比:

如您所见，游戏在调整尺寸的页面上并不完全可见。这引出了我的第二个问题。

我的第二个问题:我也在尝试设置最小页面大小。这样，将显示整个游戏屏幕，无论屏幕有多大或多小(在某种程度上)。有什么方法可以让 Canvas 根据页面大小自行调整大小，并确保它不小于“x”数量？这是用 Javascript 还是 CSS 完成的？

如果您能帮我解决这两个问题，那将大有帮助。谢谢!

编辑:如果有帮助，这里是 p5 草图的链接。 https://editor.p5js.org/ThisBubblyBoi/sketches/CbxWQSrjF

Answer 1

不幸的是，如果您尝试使用 CSS 调整 Canvas 元素的大小，当您在其上绘制时它会变得模糊。

所以你得用Js来设置canvas的width和height属性。请注意，因此您可能不得不更改在 Canvas 上绘制的方式。

let canvas = document.querySelector("#myCanvas");
canvas.width = Math.max(400, canvas.clientWidth);
canvas.height = canvas.clientHeight;

body {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  min-width: 400px;
  padding: 60px;

}

canvas {
  border: 2px solid yellow;
  width: 100%;
  height: 100px;
}

<canvas id="myCanvas" width="50" height="50"/>

请注意，如果使用此解决方案在 Canvas 上绘制然后调整大小，它看起来会很模糊，您只需使用正确的分辨率刷新页面即可解决此问题。