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

要在特定位置创建p5.js画布，您需要使用createCanvas()函数，并结合CSS样式来定位画布。以下是一个简单的示例，展示了如何在页面的特定位置创建一个画布：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js 画布定位示例</title>
<style>
  #canvas-container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto; /* 居中 */
    top: 100px; /* 根据需要调整位置 */
  }
  #myCanvas {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
</head>
<body>
<div id="canvas-container">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <script src="sketch.js"></script>
</div>
</body>
</html>

JavaScript/p5.js部分（sketch.js）

function setup() {
  // 创建画布并指定尺寸
  let cnv = createCanvas(400, 400);
  // 将画布附加到特定的div容器中
  cnv.parent('canvas-container');
}

function draw() {
  background(220);
  ellipse(width/2, height/2, 50, 50); // 在画布中心绘制一个圆
}

解释

HTML部分:
- 创建一个div元素作为画布的容器，并给它一个ID（例如canvas-container）。
- 使用CSS样式来定位这个容器。在这个例子中，容器被设置为相对定位，并且通过top属性向上移动了100px。
- 在容器内引入p5.js库和您的sketch.js脚本。

JavaScript/p5.js部分:
- 在setup()函数中，使用createCanvas()创建画布，并通过cnv.parent('canvas-container')将画布附加到之前定义的容器中。
- draw()函数用于绘制图形，这里只是一个简单的例子，在画布中心绘制了一个圆。

通过这种方式，您可以精确控制p5.js画布在页面上的位置。您可以根据需要调整CSS样式中的top, left, bottom, right属性来改变画布的位置。