p5.js -- canvas.parent() 不是函数 -- 类型错误？

Question

好的，以前从未使用过 professing 或 p5，但我正在帮助 designer/artist 朋友开发 wordpress 网站。他制作了 p5 草图，需要我将 canvas 贴在首页顶部的 header div 中。

我做了一些研究，显然我应该使用 canvas.parent("NameOfDivIdHere");但这是行不通的。我在 return 中遇到类型错误。

我已将我的代码精简为最基本的形式，但我仍然遇到类型错误。所以这里是：

<html>
<head>

    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="generative.js" type="text/javascript"></script>
</head>
<body>
<div id = "first">
    <p> First div is here. </p>
</div>
<div id = "second">
    <p> Second div is here. </p>
</div>
<div id = "third">
    <p> Third div is here. </p>
</div>
<div id = "fourth">
    <p> Fourth div is here. </p>
</div>
<p>And here is the end of the document.</p>
</body>

</html>

我在 generative.js 文件中的设置函数如下所示：

function setup() {
  createCanvas(windowWidth, windowHeight);
    canvas.parent('first');
  bground = color(255);                                                             // Color definitions.
  onionSkin = color(255, 30);
  soulStroke = color(255, 3);
  soulFill = color(0, 126, 255, 1);
  background(bground);
  v = 2;
  windowRes = windowWidth * windowHeight;
  soulNum = int(windowRes / 30000);
  soulNum = constrain(soulNum, 12, 33);
  for (var i = 0; i < soulNum; i++) {                                               // Initialize souls.
    souls[i] = new Soul();
  }
  frameRate(30);  
}

知道我需要做什么吗？

Answer 1

您需要定义变量canvas。

var canvas = createCanvas(windowWidth, windowHeight);
canvas.parent('first');

p5.js -- canvas.parent() 不是函数 -- 类型错误？

p5.js -- canvas.parent() is not a function -- type error?

html

javascript

processing

p5.js