logo标签列表

如何让p5.js在特定位置创建画布

javascripthtmlcssp5.js
3

我目前只有1小时的HTML和CSS经验，对编程有更加深入的理解，例如JavaScript。所以如果我不知道如何在这里做某事，请原谅我。

我想创建我的p5画布，并遵守我的CSS规则。我该怎么做？

<!DOCTYPE html>
<html lang="en">
<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);
    }
}

这会生成这个页面： 破碎的p5位置
你可以为canvas元素设置样式。我不会为script元素设置样式，因为那没有意义。p5.js为你创建了一个canvas，所以你可以对它进行样式设置。 - George
这是推荐的做法吗？还是只在这种情况下？ - Clebo Sevic
1个回答
4
你可以在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
}

现在改变画布的位置只需要在HTML中定位一个
元素即可。具体实现的方式因你所需而异，但你应该可以在线上找到一些很好的资源来帮助你。此外，正如@Georges在评论中指出的那样，你CSS代码文件中的这部分内容是没有意义的。
script {
    alignment: center;
}

你正在尝试对齐 script 标签，但这些标签仅用于获取一些 JavaScript 代码，并不在页面上显示。同时应用于这些标签的样式不会影响到由你的 JavaScript 代码处理/创建的 HTML 元素，因此这些 CSS 是无效的。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接