Question

在我的p5.js代码original code here中，我希望画布与屏幕的左上方对齐。但是，画布似乎并不想合作，看起来在画布顶部有填充物。

当CSS中的显示类设置为“阻止”（默认值）时，画布顶部似乎有填充物，但是您不能使用CSS来更改它。我想要的是将画布对齐到左上方。

我尝试使用padding-top，padding，block：inline和overflow：hidden来操纵CSS，但是它们没有起作用，但是，block：inline似乎改变了画布，所以padding在左侧而不是顶端。

简而言之，我尝试在我的草图中执行此操作：

function setup() {
  createCanvas(900, 600);
}

function draw() {
  draw_my_stuff_here();
}

但是，此代码正常工作，但是似乎draw_my_stuff_here（）;中的内容导致此问题发生的原因。

一个更简单的版本found here是非常相似的设置，但实际上有效。区别在于它不使用SceneManager。使用仅带有矩形的SceneManager的版本可以使用，并且可以为found here。

我希望画布的左上角与屏幕的左上角对齐，但是它没有这样做，我不确定为什么。我的调试尚未解决。我看过github上的p5.js，但是找不到任何非常相似的问题，老实说，问题可能出在我的代码中（而不是p5.js的问题）。

在我的代码中，我使用的是一个允许我拥有不同场景的库，因此，实际上正在运行的代码（draw函数）位于game.js中。您会在这里找到我编写的代码。

Answer 1

我很想知道如何在HTML和Body上设置填充，边距（甚至边框）。

html, body {
  border: 0px; 
  margin: 0px;
  padding: 0px;
}

尝试一下，看起来您canvas元素的原始CSS带有一些逗号，应该在分号上。

canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

Answer 2

我遇到的问题是画布应该放在哪里，因此CSS会对画布做任何想要的事情。通过

canvas {
  display: block;
  position: absolute; 
  left: 0;
  top: 0;
}

它强制CSS将其放在左上角。感谢@Andrea和@jdevo提出了解决我的问题的方法。