为什么在画布上只绘制一个对象?

时间:2017-06-25 15:51:43

标签: javascript html5-canvas

在画布图像x或y更改后,我创建了渲染方法。但是在改变位置后只绘制一幅图像,第二幅图像不被绘制。它还取决于我在屏幕上添加图像的顺序。

App.js

my_Doge = game.addSprite("Doge", "mydoggy", 0, 700, 100, 100);
my_Cat = game.addSprite("Cat", "mycat", 0, 0, 100, 100);

function update(){
    game.setPos(my_Cat, my_Cat.xcoord+=2, my_Cat.ycoord+=2);
    game.setPos(my_Doge, my_Doge.xcoord+=2, my_Doge.ycoord-=2);
}

Library.js

moopleGame.prototype.setPos = function(sprite, newX, newY)
{ // Set new sprite position
    sprite.xcoord = newX;
    sprite.ycoord = newY;

for(var i = 0; i < this.addedSprites.length; i++)
{
    this.sprite_index = 0;

    if(sprite.id == this.addedSprites[i].id) // Find index of that image in array
    {
        this.sprite_index = i;
    }
}

this.render(this.sprite_index, sprite.width, sprite.height, sprite.xcoord, sprite.ycoord);
}

moopleGame.prototype.render = function(index, width, height, x, y) // Draw image to screen
{
    ctx = this.ctx;

    this.fillCanvas();

    this.addedSprites[index].x = x;
    this.addedSprites[index].y = y;

    var w = new Image();
    w.src = this.addedSprites[index].src;

    ctx.drawImage(w, this.addedSprites[index].x,
    this.addedSprites[index].y,
    this.addedSprites[index].width,
    this.addedSprites[index].height);
}

Preview

0 个答案:

没有答案