Question

我写了一个小程序，在我试图做一个动感十足的“泡泡”背景的过程。为此，我正在使用HTML canvas。我试图用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（）中使用console.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);

Answer 1

setTimeout函数中有错误，您正在调用drowBubble函数（调用），而没有参数。

尝试从以下位置更改

setTimeout(drowBouble(), 100)

收件人

setTimeout(drowBoubles, 100)

Answer 2

我的错误是我叫drowBouble（）而不是drowBoubles（）...

Answer 3

据我所知，您正在尝试阅读不可读的内容。您想看颜色吗？然后给它起个名字。现在发生的是，您正在告诉客户端读取该方法生成的颜色，但该颜色未包含在任何属性中。尝试给它起一个类似const colorName的名称，然后在控制台日志中使用它。

为什么我看不懂属性颜色？

3 个答案: