Javascript p5画布重新定心

我正在做一个障碍游戏，类似于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草图的链接，如果有帮助的话。

---

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

因此，您必须使用Js设置画布的

宽度

和

高度

属性。请注意，正因为如此，您可能必须更改在画布上绘制的方式

let canvas=document.querySelector（“myCanvas”）；
canvas.width=Math.max（400，canvas.clientWidth）；
canvas.height=canvas.clientHeight
正文{
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：中心；
保证金：0；
高度：100vh；
宽度：100vw；
最小宽度：400px；
填充：60px；
}
帆布{
边框：2倍纯黄色；
宽度：100%；
高度：100px；
}
我尝试了此操作，但您的修复程序似乎不起作用。使用Math.min（）时，画布变得非常小。我也尝试了Math.max（），但这并没有根据窗口大小调整画布的大小。我认为p5画布可能有不同的基础，有不同的机制——但我不是100%确定。如果有帮助的话，我已经链接了我的p5草图。非常感谢。您好，您的命令完全正确，我没有注意p5.js标记，我已经查看了您当前的项目，并且仅在
setup（）
函数中对
style.css
和
sketch.js
应用了更改。我所做的与我在回答中所展示的没有什么不同，但是你可以问，如果你有什么不明白的地方。注意：调整窗口大小后按“播放”按钮，以便我可以以正确的大小重新进入画布。