Javascript& HTML5 Canvas Spritesheet X Y坐标问题

时间:2014-03-12 18:39:33

标签: javascript html5 canvas sprite

我希望游戏中的玩家对象有一个简单循环的spritesheet。我的spritesheet方法有效,但我可以将精灵放在正确的坐标上。

var player = {
    color: "blue",
    x: 220,
    y: 270,
    width: 32,
    height: 32,
    sprite:spriteDraw(),
    draw: function () {
        //canvas.fillStyle = this.color;
        //canvas.fillRect(this.x, this.y, this.width, this.height);
        this.sprite.draw(canvas, this.x, this.y);
    }
};

function spriteDraw() {
    requestAnimationFrame(spriteDraw,null);
    //canvas.clearRect(0,0,512,512);
    var x = (count % 5) * 512;
    var y = Math.floor(count / 5) * 512
    var sprite = canvas.drawImage(img,x,y,512,512,0,0,32,32); //last two numbers scale on canvas
    if(count==5) {
        count=0;
    }
    else
        count++;
    return sprite;
}

我可以看到它与调用this.sprite.draw(canvas, this.x, this.y);和。{ var sprite = canvas.drawImage(img,x,y,512,512,0,0,32,32);但是当我尝试将drawImage坐标设置为player.xplayer.y时,我在控制台中得到了“未解析的玩家”。

我该怎么做?

0 个答案:

没有答案