JavaScript开发canvas粒子系统时粒子position属性返回NaN是什么原因？

你遇到的NaN问题根本原因是类构造函数拼写错误：你在Chakibum类中将构造函数名错误拼写为cosntructor，正确拼写应为constructor。JS实例化类时只会执行名称完全匹配的构造函数，你写的初始化逻辑从未被触发，导致所有实例的x、y、velX等属性默认都是undefined，后续参与数值运算后就会返回NaN，这也是你修改构造函数内部逻辑始终无效的原因。

将Chakibum类的构造函数拼写修正即可，参考修改后代码：

class Chakibum{
    // 修正构造函数拼写
    constructor(){
        this.x = Math.random() * canvas.width;  
        this.y = Math.random() * canvas.height;
        this.size = randi(1, 6);
        this.velX = randi(-2, 3);
        this.velY = randi(4, 6);
    }
    update(){
        this.x += this.velX;
        this.y += this.velY;
    }
    dibuparti(){
        ctx.fillStyle = 'red'
        ctx.beginPath();
        // 原代码写死了半径50，粒子会过大容易超出画布，可替换为你定义的size属性
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

如果修正拼写后还有问题，按以下顺序检查：

• 调用lalista()实例化粒子前，已经正确获取到canvas DOM对象，canvas.width和canvas.height为有效值而非undefined
• 存储粒子的labolitas数组已提前声明，可在代码开头补充const labolitas = [];
• randi函数的定义位置在Chakibum类实例化之前，避免调用未定义函数报错

内容的提问来源于stack exchange，提问作者Pure