Question

我使用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的其余部分。 - 长篇文章

非常感谢任何帮助！

Answer 1

使用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);
}

如何使HTML5画布图案填充样式与绘制对象一起移动？

1 个答案: