創建簡單的p5.js畫布

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未定義”的錯誤。

基本上，默認情況下（也就是在全局模式下），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用於調用函數的對象中。 有關詳細信息，請參見此處 但即使使用實例模式，您可能仍然不需要使用onload()或JQuery的ready()函數。

無恥的自我推銷：我已經寫了一篇關於P5.js如何在這里工作的教程。

創建簡單的p5.js畫布

問題描述

1 個解決方案

解決方案1
3 已采納 2017-11-20 23:23:23

創建簡單的p5.js畫布

問題描述

1 個解決方案

解決方案1 3 已采納 2017-11-20 23:23:23

解決方案1
3 已采納 2017-11-20 23:23:23