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

如何解决如何获取p5.js在特定位置创建画布

我现在在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;
    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);
    }
}

这将创建此页面：

解决方法

您可以做的是创建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
}

现在更改画布的位置只需在HTML中放置div即可。有很多不同的方法可以执行此操作，具体取决于您要执行的操作，但是您应该能够在线找到一些有关该资源的好资源。

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

script {
    alignment: center;
}

您正在尝试对齐script标签，但是这些标签仅用于提供一些JavaScript，它们未显示在页面中。而且，应用于这些标签的样式不会影响由您的JavaScript代码处理/创建的HTML元素，因此此CSS没有用。

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

如何解决如何获取p5.js在特定位置创建画布

解决方法

相关推荐