javascript - 如何使HTML5 Canvas 图案fillstyle与绘制的对象一起移动？

我使用dwmkerr's spaceinvader项目为好友创建了一个网站。基本上，我正在尝试对其进行修改，以使我不会乱拍，而是面对他。

不幸的是，这一点给我带来了可怕的时光：

    for(var i=0; i<this.invaders.length; i++) {
    var invader = this.invaders[i];
    var robbie=document.getElementById("robbie");
    var pat=ctx.createPattern(robbie, "repeat");
    ctx.fillStyle = pat;
    ctx.fillRect(invader.x - invader.width/2, invader.y - invader.height/2, invader.width, invader.height);
}`

工作示例是here。如您所见，该模式似乎并没有随单个对象重绘，而是充当了背景。我希望将脸部放置在每个盒子中，以作为可移动的背景，并在每个单独的盒子中重新绘制。

Here是其余的js。 -太长而无法输入文字

非常感激任何的帮助！

最佳答案

使用drawImage代替fillRect

var robbie = document.getElementById("robbie");

for(var i=0; i<this.invaders.length; i++) {
    var invader = this.invaders[i];
    ctx.drawImage(robbie,invader.x - invader.width/2, invader.y - invader.height/2);
}