在我的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中。您会在这里找到我编写的代码。
答案 0 :(得分:1)
我很想知道如何在HTML和Body上设置填充,边距(甚至边框)。
html, body {
border: 0px;
margin: 0px;
padding: 0px;
}
尝试一下,看起来您canvas元素的原始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提出了解决我的问题的方法。