p5.j​​s - canvas.parent()不是函数类型错误?

时间:2018-02-08 04:47:36

标签: javascript html processing p5.js

好吧,以前从未使用过自称或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>

我在generative.js文件中的setup函数如下所示:

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);  
}

任何线索我需要做什么?

1 个答案:

答案 0 :(得分:3)

您需要定义变量画布。

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