javascript - 为什么找不到函数 Fill？但是图书馆的其他功能是吗？

Question

我正在处理 P5.js 草图...

而不是使用构造函数创建对象，然后使用 new 关键字。

我想使用工厂函数。

它似乎工作正常，并且在使用例如以下代码时呈现正确:

 stroke(255,0,0)
 ellipse(speed, 10, 10, 10)

但目前我尝试使用 fill(255)，我收到一条错误消息说 fill 不是一个函数？

怎么可能只有 p5 中的这个函数没有被识别，而其他的可以呢？

这是一个代码笔:https://codepen.io/giorgiomartini/pen/VVKMKg?editors=0011

代码:

function setup () {
  createCanvas(300,500)
  background(3)
  bola = createCircle(circleOpts)
}

const circleOpts = {
  fill: 255,
  x: 0,
  y: 0,
  maxRadius: 10,
}

const createCircle = ({fill = 255, x = 10, y = 10, maxRadius = 20}) => {
 let speed = 0
 return {
   display() {
     noStroke()
     background(2)
     stroke(255,0,0)
     // if you remove this next line it works!
     fill(255)
     ellipse(speed, 10, 30, 30)
   }
 }
} 

let bola

function draw () {
   bola.display()
}

Answer 1

存在变量名冲突:fill是在createCircle函数参数列表中创建的局部变量。这个局部变量隐藏 您可能在全局范围内定义的函数名称。而这个局部变量确实不是一个函数(而是一个数字)。

您可以通过更改名称来解决此问题:更改函数 fill 的名称或更改局部变量 fill 的名称。如果您选择后一种选择，它可能看起来像这样:

const circleOpts = {
  fillColor: 255,   // <-------- changed name
  x: 0,
  y: 0,
  maxRadius: 10,
}

const createCircle = ({fillColor = 255, x = 10, y = 10, maxRadius = 20}) => {
//                     ^^^^^^^^^

...等等