Question

P5，js无法运行绘制函数

2022-12-24

480

p5.js

我尝试通过 index html 文件运行 p5.js 脚本，但它只创建了画布，并没有运行 draw 函数。以下是 index.html 文件中的 html：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
  </head>
  <body>
 <script src="samplesquares.js"></script>
  </body>
</html>

以下是 samplesquares.js 文件中的 js：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  var randm = 0, color1 = 0;
  background(220);
  randm = random();
  if (randm <0.33){
     color1= color(0, 114, 206);
     }else if (randm <0.66){
     color1= color(240, 84, 84);
     }else{
     color1= color(48, 71, 94);
     }
  fill(color1);
  square(100, 80, 200, 80);
}

它似乎创建了画布，但没有运行 draw 函数。我认为这是一个非常基本的错误，非常感谢您的帮助。

我在本地打开了 index.html 文件，也通过 Chrome 的 Web 服务器打开了文件，两次都得到了相同的输出。

Answer 1

将 p5.js 的版本从 0.5.11 更改为 1.5.0 （最新版本）可以解决我的错误：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>

我认为您不再需要 addons/p5.dom.min.js 。