创建简单 p5.js canvas

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

我在这里看到了：

但是，第一个示例是推荐的方式。为什么它不起作用？我怎样才能在工作中得到它？（本人JS水平低）谢谢

Answer 1

您应该不自己调用setup()函数。 P5.js 图书馆为您调用它。自己调用它会短路 P5.js 所做的所有很酷的事情，这就是为什么你会收到 "createCanvas is not defined" 错误。

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

换句话说，您不想使用onload()或JQuery的ready()函数和P5.js .您想让 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 canvas

Creating simple p5.js canvas

javascript

canvas

p5.js