p5js 在中间添加画布 - Javascript (1)

📌 相关文章

📜 p5js 在中间添加画布 - Javascript (1)

📅 最后修改于: 2023-12-03 15:18:12.980000 🧑 作者: Mango

P5.js-在中间添加画布

P5.js是一个流行的JavaScript库，用于创建交互式图形和动画。本文将介绍如何在网页中央添加一个P5.js Canvas。

步骤

创建HTML文件，并在其中添加一个div元素。将其ID设置为“canvas-container”。我们将在此容器中添加P5.js Canvas。

<!DOCTYPE html>
<html>
  <head>
    <title>P5.js Canvas in the middle</title>
  </head>
  <body>
    <div id="canvas-container"></div>
    <script src="sketch.js"></script>
  </body>
</html>

2.创建一个P5.js sketch.js文件，并在其中编写Canvas代码。您可以使用setup和draw功能，并在setup中设置Canvas的大小。

function setup() {
  var canvas = createCanvas(640, 480) //设置画布宽高
  canvas.parent('canvas-container') //将画布添加到容器中心
}

function draw() {
  background(220)
  fill(255, 0, 0)
  ellipse(width / 2, height / 2, 50, 50)
}

3.将P5.js sketch.js文件链接到HTML文件中。

<script src="sketch.js"></script>

4.您可以使用CSS样式来使容器内的Canvas水平和垂直居中。

#canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* full height of viewport */
}

现在，您已经成功地在网页中央添加了一个P5.js Canvas！

结论

在P5.js中创建Canvas十分简单，并且可以通过CSS样式轻松定位。在此教程中，我们了解了如何在网页中央添加一个P5.js Canvas，并且使用了基础JavaScript、HTML和CSS语法。