Добавьте эскиз P5. js на фон шаблона Bootstrap - PullRequest
Новая
       7

Добавьте эскиз P5. js на фон шаблона Bootstrap

0 голосов
/ 28 марта 2020

Я действительно новичок, поэтому мои знания в целом очень скудны.

Я пытаюсь добавить эскиз P5 js в шаблон Bootstrap.

Идеальным было бы чтобы иметь возможность создавать адаптивный дизайн-сайт, с некоторыми изображениями и видео галереями с кодом p5 js на фоне.

Я провел несколько тестов, используя пример, который нашел в onine, но не смог этого сделать.

Я прилагаю код здесь

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>

1 Ответ

0 голосов
/ 30 марта 2020

Я нашел старую ветку здесь , в которой, кажется, есть ответ на ваш вопрос, так как я думаю это - это то, что вы имеете в виду.

...