重复drawImage 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);
        }
    }
}