如何让 p5.js 在某个位置创建 canvas

Question

我现在在 HTML、CSS 方面确实有 1 小时的经验，并且对编程有了更深入的了解，例如使用 java 脚本。所以请原谅我，如果我对如何在这里做某事的想法为零。

我想创建我的 p5 canvas，它也符合我的 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);
    }
}

这将创建此页面：

Answer 1

您可以做的是创建 div，它会直接在您的 html

中包含您 canvas

<body>
    <div class="container">
        <h1>My Website</h1>
        <h2>It is all coming together.</h2>

        <div id="canvasDiv"></div>
    </div>
</body>

然后在 setup() 函数中创建 canvas 并将其放入 div:

const myCanvas = createCanvas(400, 400);
myCanvas.parent('canvasDiv');

这应该会为您提供与现有结果相同的结果，但现在在您的 css 中，您可以设置此 div 的样式，从而更改其位置：

#canvasDiv {
    // your canvas style
}

现在改变你的 canvas 的位置只是在你的 html 中定位一个 div 的问题。有很多不同的方法可以做到这一点，具体取决于您究竟想做什么，但您应该能够在网上找到一些很好的资源。

正如@Georges 在评论中指出的那样，您的 CSS 文件的这一部分没有意义：

script {
    alignment: center;
}

您正在尝试对齐您的 script 标签，但这些标签仅用于来源某些 javascript，它们不会显示在页面中。并且应用于这些标签的样式不会影响 HTML 元素，这些元素是 javascript 代码 handled/created，所以这个 CSS 是无用的。

如何让 p5.js 在某个位置创建 canvas

How to get p5.js to create canvas at certain position

html

javascript

css

p5.js