javascript - 无法引用 setup() 中声明的变量

Question

我最近尝试进入 p5.js，在我正在从事的第一个项目中，我遇到了一个完全反常的问题，无论出于何种原因，我在网上找到的其他地方都没有提到这个问题。

我在 setup() 之外定义的任何变量都将是未定义的，但这是众所周知的事实。问题是我在 setup() 内部定义的任何变量也将是未定义的，这意味着我根本无法使用任何变量。

这是代码:

function setup() {
  const canvasRatio = 0.975;
  createCanvas(int(windowWidth*canvasRatio), int(windowHeight*canvasRatio));
  fill(0);
  strokeWeight(2);
  var plyMov = createVector(0,0,0);
  var plyPos = createVector(0,0,0);
  const plySpd = 1;
  const plyEnable = 0;
}

function draw() {
  background(0);
  drawPly();
}

function drawPly(){
  plyPos=createVector(plyPos.x+plyMov.x,plyPos.y+plyMov.y,0)
  plyMov=createVector(0,0,0);
  stroke(255,0,0);
  ellipse(int(width/2),int(height/2),80, 80);
}

这是 vscode 中 chrome 的回溯:

ReferenceError: plyPos is not defined
    at drawPly (https://magicgonads.github.io/p5test/sketch.js:18:23)
    at draw (https://magicgonads.github.io/p5test/sketch.js:14:3)
    at p5.redraw (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js:16560:7)
    at p5.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js:11593:12)
    at p5.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js:11489:12)
    at new p5 (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js:11769:12)
    at _globalInit (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js:8048:7)

Answer 1

Any variable I define outside of setup() will be undefined, but that's a well known fact.

嗯，什么？这并不是众所周知的事实。您可能意味着在设置之前无法使用处理的函数，但这并不能阻止您在草图顶部定义变量。

如果您在 setup() 中定义变量，则该变量仅在 setup() 中可用。对于任何函数内定义的任何变量都是如此。

如果要在多个函数中使用变量，则应在草图级别定义它。您仍然可以在 setup() 函数中初始化它(给它一个值):

var plyPos;
var plyMov;

function setup() {
  const canvasRatio = 0.975;
  createCanvas(int(windowWidth*canvasRatio), int(windowHeight*canvasRatio));
  fill(0);
  strokeWeight(2);
  plyMov = createVector(0,0,0);
  plyPos = createVector(0,0,0);
}

function draw() {
  background(0);
  drawPly();
}

function drawPly(){
  plyPos=createVector(plyPos.x+plyMov.x,plyPos.y+plyMov.y,0)
  plyMov=createVector(0,0,0);
  stroke(255,0,0);
  ellipse(int(width/2),int(height/2),80, 80);
}