Question

我无法理解特殊定义的p5函数如何引用全局定义的变量。像这样的函数 - 一个常量在本地提供p5函数的参数 - 工作得很好。

function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

但由于某种原因，我无法得到这样的东西来绘制椭圆：

  var CANVAS_HEIGHT = 1024;
  var CANVAS_WIDTH = 768;
  var RADIUS = 150;
  var circleColor = 150;
  var bgColor = 50;

  function setup() {
    backgroundColor = color(bgColor);
    createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);          
  }


  function draw() {
    fill(circleColor);
    ellipse(CANVAS_WIDTH/2, CANVAS_HEIGHT/2, RADIUS*2, RADIUS*2);

  }

显然，setup函数确实创建了一个引用全局变量的画布。但是，绘图功能似乎没有引用它们。我在这里错过了什么？谢谢你的帮助。

Answer 1

您无法在setup()函数中使用此类变量。

您必须直接使用这些值，并且必须在setup()函数内分配变量：

  var CANVAS_HEIGHT;
  var CANVAS_WIDTH;
  var RADIUS;
  var circleColor;
  var bgColor;

  function setup() {
    backgroundColor = color(50);
    createCanvas(1024, 768);  

    CANVAS_HEIGHT = 1024;
    CANVAS_WIDTH = 768;
    RADIUS = 150;
    circleColor = 150;
    bgColor = 50;        
  }

来自p5.js faq：

为什么我不能在setup（）之前使用p5函数和变量分配变量？

在全局模式下，p5变量和函数名称不可用   外部设置（），draw（），mousePressed（）等（除非在这种情况下   它们被放置在由其中一个调用的函数内   方法。）这意味着在之前声明变量   setup（），如果你需要在setup（）中分配值   希望使用p5功能。例如：
var n;
function setup() {
  createCanvas(100, 100);
  n = random(100);
}
对此的解释有点复杂，但必须这样做   与库的设置方式，以支持全局和   实例模式。要了解发生了什么，让我们先来看看   加载带有p5的页面时（在全局模式下）会发生命令。

加载脚本。 HTML页面加载（当这个完成时，   onload事件触发，然后触发步骤3）。全部启动p5   函数被添加到全局命名空间。所以问题在于   在p5启动之前加载和评估脚本，而不是   但是知道p5变量。如果我们试着在这里打电话给他们，他们会   导致错误。但是，当我们在setup（）中使用p5函数调用时   和draw（）这没关系，因为浏览器没有查看内部   首次加载脚本时的函数。这是因为   setup（）和draw（）函数不在用户代码中调用，它们是   只是定义了，所以它们内部的东西还没有运行或评估。

直到p5启动时才实际使用setup（）函数   run（p5为你调用），此时，p5函数存在   在全局命名空间中。

为什么我的p5函数不能全局引用这些变量？

1 个答案: