Javascript 为什么可以'；难道我看不到酒店的颜色吗？

我写了一个小程序，我正在尝试做一个移动的“泡沫”背景。为此，我使用HTML画布。我试图用JavaScript对象表示每个气泡。当我在列表中循环时，我得到了一个错误。错误是：

Uncaught TypeError: Cannot read property 'color' of undefined
    at drowBouble (app.js:44)
    at drowBoubles (app.js:38)
    at generateBoubles (app.js:29)
    at app.js:57
drowBouble @ app.js:44
drowBoubles @ app.js:38
generateBoubles @ app.js:29
(anonymous) @ app.js:57 

我尝试在函数drowBouble（）中控制台.log（）索引，在上一次迭代中，结果未定义。为什么？我怎样才能修好它

我的app.js：

var canvas = document.getElementById("cv");
let width = window.innerWidth * 0.98;
let height = window.innerHeight * 0.97;
canvas.width = width;
canvas.height = height;

var context = canvas.getContext("2d");

var boubles = [];

var createBouble = function() {
  let x = Math.floor( width * Math.random());
  let y = Math.floor(height * Math.random());
  let color = getColor();
  let radius = 30 + Math.floor(Math.random() * 50);
  let xAcc = 10;
  let yAcc = 10;
  return {x, y, color, radius, xAcc, yAcc};
}

var getColor = function() {
  return 'rgba(' + Math.floor(Math.random() * 255) + ', ' + Math.floor(Math.random() * 255) + ', ' + Math.floor(Math.random() * 255) + ', ' + 0.3 + ')';
}

var generateBoubles = function(amount) {
  for (let i = 0; i < amount; i++) {
    boubles.push(createBouble());
  }
  drowBoubles();
}

var drowBoubles = function() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < boubles.length; i++) {
    drowBouble(i);
    updateBouble(i);
  }
  setTimeout(drowBouble(), 100);
}

var drowBouble = function(index) {
  console.log(index);
  console.log(boubles.length);
  context.fillStyle = boubles[index].color;
  context.beginPath();
  context.arc(boubles[index].x, boubles[index].y, boubles[index].radius, 0, 2 * Math.PI);
  context.fill();
}

var updateBouble = function(index){
    let bouble = boubles[index];
    bouble.x += bouble.xAcc;
    bouble.y += bouble.yAcc;
    boubles[index] = bouble;
}

generateBoubles(20);

var canvas=document.getElementById（“cv”）；
let width=window.innerWidth*0.98；
let height=window.innerHeight*0.97；
画布宽度=宽度；
canvas.height=高度；
var context=canvas.getContext（“2d”）；
var boubles=[]；
var createBouble=函数（）{
设x=Math.floor（宽度*Math.random（））；
设y=Math.floor（高度*Math.random（））；
让color=getColor（）；
让半径=30+数学地板（数学随机（）*50）；
设xAcc=10；
设yAcc=10；
返回{x，y，颜色，半径，xAcc，yAcc}；
}
var getColor=function（）{
返回'rgba（'+Math.floor（Math.random（）*255）+'，'+Math.floor（Math.random（）*255）+'，'+Math.floor（Math.random（）*255）+'，'+0.3+'）；
}
var generateBoubles=函数（金额）{
for（设i=0；i

从我看到的情况来看，您试图阅读一些不可读的内容。你想看看颜色吗？然后给它起个名字。现在发生的事情是，您告诉客户机读取从该方法生成的颜色，但它不包含在任何属性中。尝试给它一个类似const colorName的名称，然后在控制台日志中使用它。

从我看到的情况来看，您试图读取一些不可读的内容。你想看看颜色吗？然后给它起个名字。现在发生的事情是，您告诉客户机读取从该方法生成的颜色，但它不包含在任何属性中。试着给它一个类似const colorName的名称，然后在控制台日志中使用它。

我的错误是调用drowBouble（）而不是drowBouble（）…

我的错误是调用drowBouble（）而不是drowBoubles（）…

错误在setTimeout函数中，您调用的是drowBouble函数（已调用）没有参数

试着从

setTimeout（drowBouble（），100）

到

---

setTimeout（drowBoubles，100）

如果setTimeout函数中存在错误，则调用drowbouble函数（已调用）时不带参数

试着从

setTimeout（drowBouble（），100）

到

---

setTimeout（drowBoubles，100）

setTimeout（drowBouble（），100）你忽略了在这里传递索引。谢谢，你是对的<代码>设置超时（drowBouble（），100）你忽略了在这里传递索引。谢谢，你是对的！您不必在SetTimeOut中调用函数您不必在SetTimeOut中调用函数谢谢！我把它改成了动画框架（drowBoubles）；非常感谢。我把它改成了动画框架（drowBoubles）；