为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕姐8265434 2023-01-06 15:16:25

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

    }

}

这将创建此页面:

http://img3.sycdn.imooc.com/63b7cae60001c21a06580601.jpg

查看完整描述

1 回答

?
慕虎7371278

TA贡献1540条经验 获得超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 无用。


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信