p5 画布居中

Question

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

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

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;
  
}

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

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

我的第二个问题：我也在尝试设置最小页面大小。这样，无论屏幕多大或多小（在一定程度上），整个游戏屏幕都会显示出来。有没有办法让画布根据页面大小调整自身大小，并确保它不小于“x”数量？这会在 Javascript 或 CSS 中完成吗？

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

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

Answer 1

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

所以你必须使用Js来设置画布的width和height属性。请注意，因此您可能必须更改在画布上绘制的方式。

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"/>

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