javascript - 未捕获的 TypeError：调用 push() 时出现类型错误

Question

我正在尝试模拟烟雾canvas。我想创建一个新的烟熏并将其推入 puffs 数组，但我不断收到"Uncaught TypeError: Type error"错误消息。
有人知道我错过了什么吗？

var puffs = [];

this.tick = function() {
    var puffLength = puffs.length;
    if ( addPuffs && ( puffLength < maxParticles )) {
        puffs.push({ //THIS ONE IT WHAT GIVES ME THE ERROR
            posX: oPoint.x,
            posY: oPoint.y,
            scale: .1,
            age: 0
        });
    }

    for(var i = 0; i < puffLength; i++) {

        var currentPuff = puffs[i];

        if(currentPuff.age == maxLife) {
            puffs.splice(i, 1);
        } else {
            currentPuff.posX += windX,
            currentPuff.posY += windY,
            currentPuff.scale += growingSpeed,
            currentPuff.age++;
        }

    }

    this.render();

}

Answer 1

在提供的小提琴中，addPuffs未定义。您需要根据您的业务逻辑定义此变量。并且未定义，这些也必须根据您的业务逻辑进行初始化oPoint.x。oPoint.y

var oPoint = {x:1, y:2}; //declare according to logic
var addPuffs = true; //some logic here
if ( addPuffs && ( puffLength < maxParticles )) {
    puffs.push({ //THIS ONE IT WHAT GIVES ME THE ERROR
        posX: oPoint.x,
        posY: oPoint.y,
        scale: .1,
        age: 0
    });
}

此外，在使用drawImage()on时，canvas我相信第一个参数必须是一个DOM元素，而不是图像的路径。

尝试：

  var img = new Image();
  img.src = "/static/img/particle.png";
  //Omitted code
  ctx.drawImage(img,80,80,1,1);