我现在有 1 小时的 HTML、CSS 经验，并且对编程有更深入的理解，例如使用 java 脚本。所以请原谅我，如果我对如何在这里做某事一无所知。我想创建我的 p5 画布，它也符合我的 CSS 规则。我该怎么做呢？<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>My website!</title> <link rel="stylesheet" href="main.css"></head><body> <div class="container"> <h1>My Website</h1> <h2>It is all coming together.</h2> <script type="text/javascript" src="p5.js"></script> <script type="text/javascript" src="my_code.js"></script> </div></body></html>我的CSS：body { background-image: url("matt-walsh-tVkdGtEe2C4-unsplash.jpg"); background-repeat: no-repeat; background-size: cover;}.container { background-color: hsla(0, 0%, 50%, 0.8); height: auto; width: fit-content; padding: 0px 250px;}h1 { text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 10vw; font-family: Arial; color: white; text-align: center;}h2 { text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 5vw; font-family: Arial; color: white; text-align: center;}p { font-family: Arial; color: black; text-align: left; max-width: 200vw;}script { alignment: center;}为了完成起见：function setup() { createCanvas(400, 400);}function draw() { if (mouseIsPressed) { fill(0); ellipse(mouseX, mouseY, 80, 80); }}这将创建此页面：
1 回答
慕虎7371278
TA贡献1802条经验 获得超4个赞
您可以做的是div直接在您的 html 中创建包含画布的
<body>
<div class="container">
<h1>My Website</h1>
<h2>It is all coming together.</h2>
<div id="canvasDiv"></div>
</div>
</body>
然后在您的setup()函数中创建画布并将其放入div：
const myCanvas = createCanvas(400, 400);
myCanvas.parent('canvasDiv');
这应该给你与你已经拥有的结果相同的结果，但现在在你的 css 中你可以设置这个 div 的样式，从而改变它的位置：
#canvasDiv {
// your canvas style
}
现在更改画布的位置只是div在 html 中定位 a 的问题。有很多不同的方法可以做到这一点，具体取决于您到底想做什么，但是您应该能够在线找到一些关于该内容的好资源。
同样正如@Georges 在评论中指出的那样，您的 CSS 文件的这一部分没有意义：
script {
alignment: center;
}
您正在尝试对齐您的script标签，但这些标签仅用于获取一些 javascript，它们不会显示在页面中。并且应用于这些标签的样式不会影响由您的 javascript 代码处理/创建的 HTML 元素，因此此 CSS 无用。
添加回答
举报
0/150
提交
取消