Question

我试图创建p5.js的最基本的例子：

$(document).ready(function(){
  function setup() {
    createCanvas(500, 500);
    background(200);
  }
});

这不起作用。根本没有创建Canvas，控制台中没有错误。

但是这个解决方案有效：

$(document).ready(function(){
  var sketch = function(p) {
    p.setup = function () {
      p.createCanvas(640, 480);
      p.background(200);
    };
  };
  new p5(sketch);
});

我在这里看到了它：https://stackoverflow.com/a/41126499/2986401

然而，第一个例子是推荐的方式。为什么不工作？我怎么能在工作中得到它？（我的JS水平很低）谢谢。

Answer 1

您应不自行调用setup()功能。 P5.js库为您调用它。自己调用它会使P5.js所做的所有很酷的东西短路，这就是为什么你得到一个“createCanvas is not defined”错误。

基本上，默认情况下（也就是在全局模式下），P5.js会查找加载库后自动为您调用的顶级函数，如setup()和draw()。这就是为什么你的第一个例子不起作用的原因：setup()函数被隐藏在你传递给JQuery的ready()函数的匿名函数中。

换句话说，你不想要在P5.js中使用onload()或JQuery的ready()函数。你想让P5.js在加载库时自动调用这些函数。

这是一个简单的示例，其中包含所需的HTML，可让您更好地了解正在发生的事情：

<!DOCTYPE html>
<html>
    <head>
        <title>P5.js Example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
        <script>
            function setup(){
                createCanvas(500, 500);
                background(64);
            }

            function draw(){
                fill(255);
                ellipse(mouseX, mouseY, 20, 20);
            }
        </script>
    </head>
    <body>
    </body>
</html>

此代码定义了顶级setup()和draw()函数。加载P5.js库时，它会自动调用这些函数。

如果您尝试自己调用setup()，则会在加载P5.js之前执行此操作，这就是未定义createCanvas()函数的原因。

您的第二个示例是使用实例模式，它将setup()和draw()函数放在P5.js用于调用函数的对象中。有关详细信息，请参阅here。但即使使用实例模式，您可能仍然不需要使用onload()或JQuery的ready()函数。

无耻的自我推销：我已经编写了一个关于P5.js如何工作的教程here。

创建简单的p5.js画布

1 个答案: