javascript - 无法动态增加对象的属性

Question

我正在尝试使用 javascript 创建动态 Canvas 动画。目的是增加许多图像对象的 x 属性，然后在每次 draw() 函数运行时将它们绘制在更新的 x 属性的 x 位置。尽管我无法成功增加此 x 属性 - 由于某种原因它总是重置为 0。

我定义了这个全局数组来包含我要绘制的所有对象:

window.character = [];

我有这个对象构造函数来创建新的图像对象:

function Character(name, x, y){
    //define the image object within the Character
    this.imageObject = new Image();
    this.imageObject.src = name+'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAW0lEQVR42mL8//8/AzpgZGTcC6KBcs5wMRwK/0MVMsLEmLAoEmXAApiwiKUhaRJCltgLsQVsWwIQ/wTx0fBeRigD7B6Y24i1mj4Kn4KI7Uie2Y7FI8+B2AMgwABjRynfWgpcxQAAAABJRU5ErkJggg==';

    window.character.push(this);
    window.characterPosition = window.character.indexOf(this);

    //set natural width and natural height once the image is loaded
    if (this.imageObject.addEventListener){
        this.imageObject.addEventListener('load', function(){
            window.imgWidth = this.naturalWidth/2;
            window.imgHeight = this.naturalHeight/2;

            //set natural width and natural height to object
            window.character[characterPosition]['imageObject']['w'] = window.character[characterPosition]['imageObject']['w0'] = window.imgWidth;
            window.character[characterPosition]['imageObject']['h'] = window.character[characterPosition]['imageObject']['h0'] = window.imgHeight;

            //set initial x and y position
            console.log(x);
            window.character[characterPosition]['imageObject']['x'] = x;
            window.character[characterPosition]['imageObject']['y'] = y;
            console.log(window.character[characterPosition]['imageObject']['x']);
            //set loaded property for the object once loading is done
            window.character[characterPosition]['imageObject']['loaded'] = true;

            function imageLoaded(element, index, array){
                return element['imageObject']['loaded'] == true;
            }

            //test whether every object in array has the image loaded
            if(character.every(imageLoaded)){
                $('button#play').show();
            };
        });
} //end object constructor

在构造函数内部，有一些奇怪的行为。我使用以下方法创建了一个新对象:

var sun0 = new Character('data:text/javascript;base64,', 12, 12);

然后这是我从对象构造函数中的 console.log 消息中看到的内容:

console.log(x); //returns 12, as expected
window.character[characterPosition]['imageObject']['x'] = x;
window.character[characterPosition]['imageObject']['y'] = y;
console.log(window.character[characterPosition]['imageObject']['x']); //returns 0. Thought it would be 12

最终，这就是我打算在屏幕上为对象设置动画的方式。此 draw() 函数每 10 毫秒运行一次。

function draw(){
    clear();

    //draw characters
    drawCharacter(window.character[0]['imageObject'],window.character[0]['imageObject']['x'],window.character[0]['imageObject']['y'],window.character[0]['imageObject']['w'],window.character[0]['imageObject']['h']);
    window.character[0]['imageObject']['x'] += 10;
    console.log(window.character[0]['imageObject']['x']); //returning 0 every time, not incrementing the way I expected it to.
}

如何让这个“x”属性递增？

here's the JS Fiddle

Answer 1

Pointy 在评论中回答了您的问题，但要对此进行扩展...您正在尝试在无法设置的 Image 上设置 x。例如，在浏览器的控制台中试试这个:

var img = new Image();
img.x = 1;
console.log(img.x); // this will be zero

这实际上就是您正在做的事情。此外，在您的代码中尝试将 ['x'] 更改为 ['myX'] 然后它将按预期工作。