将 P5.js 草图添加到 Bootstrap 模板背景

Question

我真的很新，所以我的知识总体上真的很差。

我正在尝试将 P5js 草图添加到 Bootstrap 模板中。

理想的情况是能够构建一个响应式设计网站，其中包含一些图像和视频库，背景为 p5js 代码。

我已经使用我在网上找到的示例做了一些测试，但我无法做到。

我在这里附上代码

https://codepen.io/llorencg/pen/LYVMLjZ

我们将不胜感激！！

谢谢:)

<html>
<head>
    <meta charset="utf-8">
    <title>p5 walkthrough</title> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">     
</head>
<body>
    <nav class="navbar navbar-dark navbar-full bg-inverse" style="">
      <a class="navbar-brand" href="#">Bootstrap and P5.js</a>
      <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">A Link to Nowhere</a>
        </li>
      </ul>          
    </nav>        
    <div class="container">
        <div id="jumbo-canvas" class="jumbotron">
          <h1>Fun With P5.js</h1>
          <p class="lead">P5 is a JavaScript library that can be used to draw things onto an html canvas. The P5 reference guide can be found <a href="https://p5js.org/reference/">here</a>, and legendary videos by Daniel Schiffman can be found <a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw">here.</a></p>
          <hr />
          <p>By giving this div an id of jumbo-canvas and and placing <code>canvas.parent('jumbo-canvas')</code>  in our setup function, we can draw inside this Bootstrap jumbotron.</p>
          <p class="lead">
            <a class="btn btn-info btn-lg" href="#" role="button">Click this button for some truth</a>
          </p>
        </div>
    </div>
</body>

Answer 1

我找到了一个旧线程here which seems to have the answer to your question, as I think this就是你的意思。

将 P5.js 草图添加到 Bootstrap 模板背景

Add a P5.js sketch to a Bootstrap template background

html

javascript

twitter-bootstrap

p5.js