如何在HTML5画布上绘制一个移动的重复图案

Question

如何在HTML5画布上绘制一个移动的重复图案

3

我有一堵墙，它在HTML5画布上从右到左移动。我使用一张砖块图案重复出现来让整个墙看起来像是由砖头覆盖。

以下是创建和填充图案的相关代码：

this.update = function() {
    var context = gCanvas.context;
    context.fillStyle = context.createPattern(this.image, "repeat");
    context.fillRect(this.x, this.y, this.width, this.height);
};

墙壁从右向左移动，但图案不随之移动，使得图案看起来像是静态图片而墙壁在其上滚动。我需要的是让图案跟随墙壁移动，使整个墙壁看起来像是从右向左移动。请查看以下jsfiddle以了解其效果：https://jsfiddle.net/ugmo1cd3/4/。

- Nick Weseman

Flappy Bird，嗯？ - Bernard

@Bernard，哈，没错，你说对了。实际上我的版本叫做“机器人先生”，并且已经发布在这里：https://chrome.google.com/webstore/detail/robotman/cjpdlmjbocfbhjgdpmfkcphkacmighmb?hl=en-US&gl=US - Nick Weseman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MaanooAk · Accepted Answer

你可以将"Wall update functions"更改为以下内容：

this.update = function() {
    var context = gCanvas.context;
    context.fillStyle = context.createPattern(this.image, "repeat");
    context.save();
    context.translate(this.x, this.y);
    context.fillRect(0, 0, this.width, this.height);
    context.restore();
};

该图案现在将从画布的(x,y)开始，而不是从(0,0)开始。