Question

您好，我有一些jquery想与该普通javascript一起使用，我希望将此脚本放入.ready函数中，以便可以使用jquery操纵变量。此代码创建动画并在.ready函数之外显示。为什么在执行此功能时不起作用，如何使它起作用？

 $(document).ready(function() {
    var particles = [];
    function setup() {
      createCanvas(400, 400);
      angleMode(DEGREES);
      translate(200, 200);
      noStroke();
      for (var i = 40; i >= 0; i--) {
        var r = i * random(5, 6) + 50;
        var angle = random(0, 360);
        for (var j = 50; j >= 0; j--) {
          r -= 0.1;
          angle += random(2, 9);
          particles.push(new Particle(r, angle, random(1, 5)));
        }
      }
      frameRate(20);
    }
    function draw() {
      background(0);
      translate(200, 200);
      var r = 210;
      for (var i = particles.length - 1; i >= 0; i--) {
        if (particles[i].r < random(20, 25)) {
          particles[i].r = r;
        } else {
          particles[i].update();
          particles[i].show();
        }
      }
    }
    function Particle(r, theta, size) {
      this.r = r;
      this.theta = theta;
      this.size = size;
      this.update = function() {
        this.r -= random(0.5, 0.8) / Math.log10(this.r * 2);
        this.theta += random(0.9, 1.5) / Math.log10(this.r / 5);
      };
      this.show = function() {
        fill(255, Math.min(2 * this.r, 255));
        ellipse(this.r * sin(this.theta), this.r * cos(this.theta), this.size);
      };
    }
});

Answer 1

您需要调用函数setup和draw，仅在代码的当前版本中定义它们，

setup()和draw()

Answer 2

在您的代码中，您定义了setup和draw函数，但未调用它们。

因此，添加代码结尾，添加两个函数调用

setup() code()

请注意，如果仅将jQuery用于document.ready事件，则可以考虑使用window.onload和DOMContentLoaded事件。您可以在this post和this answer

中详细了解这些内容

.ready函数中的Javascript无法正常工作

2 个答案: