javascript - 重复绘制图像 HTML5

Question

我有一个图像，我想在不使用多重图像的情况下重复该图像。

var bg1 = function (speed) { // MOVEING IMAGES
    if (bg_moving) { // background
        bg.x-= 1 * speed; // SPEED
        ctx.drawImage(bg_image, bg.x, 0);
    }
}

http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/08/header2.png

(不是我的图像，而是重复 x 的图像示例)

Answer 1

您可以根据需要多次绘制它。在此示例中，它向右绘制了五次。

var repeat = 5;
var bg1 = function (speed) { // MOVING IMAGES
    if (bg_moving) { // background
        bg.x-= 1 * speed; // SPEED
        for (var i = 0; i < repeat; i++){
            ctx.drawImage(bg_image, bg.x + (i * bg.width), 0);
        }
    }
}