canvas元素似乎已填充,但是css表示不是

时间:2019-05-14 15:08:26

标签: css p5.js

在我的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中。您会在这里找到我编写的代码。

2 个答案:

答案 0 :(得分:1)

我很想知道如何在HTML和Body上设置填充,边距(甚至边框)。

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

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

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

答案 1 :(得分:1)

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

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

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