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

【问题标题】：p5.js -- canvas.parent() is not a function -- type error?p5.js——canvas.parent() 不是函数——类型错误？
【发布时间】：2018-02-08 04:47:35
【问题描述】：

好的，以前从未使用过 professing 或 p5，但我正在帮助一位设计师/艺术家朋友创建一个 wordpress 网站。他做了一个 p5 草图，需要我把画布贴在首页顶部的标题 div 中。

我做了一些研究，显然我应该使用 canvas.parent("NameOfDivIdHere");但这行不通。我得到一个类型错误作为回报。

我已将代码精简为最基本的形式，但仍然出现类型错误。就这样吧：

<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>

我在 generation.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);  
}

知道我需要做什么吗？

【问题讨论】：

标签： javascript html processing p5.js

【解决方案1】：

你需要定义变量画布。

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

【讨论】：

啊，当吉特！你说得对！文档甚至表明了这一点。我只是完全错过了它。我认为画布是某种已经声明的 var 或其他东西。我懒惰。谢谢！
@DavidA.French 如果此答案对您有所帮助，请将其标记为已接受，以便您的问题不再显示为需要答案。