无限背景在javascript html5画布中滚动

时间:2015-02-26 14:50:12

标签: javascript html5 canvas

我正试图在飞扬的鸟类游戏中实现无限滚动。我减少了x位置并绘制了背景并再次绘制了剪切的图像部分。 但它并不像其他游戏那样无缝。我可以看到图像连接的部分。有没有优雅的方法呢? 这是代码

window.onload = function()
{
    var xpos=0;
    var ypos=0;


    var canvas = document.getElementById("screen");
    var ctx = canvas.getContext("2d");

    var bg = new Image();
    bg.src="background2.png";
    bg.onload = function(){
        update();
    };


function update()
{   xpos-=5;

    if(xpos==-750)
    {
        xpos = 0;
    }
    ctx.drawImage(bg,xpos,ypos,canvas.width,canvas.height);
    ctx.drawImage(bg,bg.width+xpos,ypos,canvas.width,canvas.height);
    setTimeout(update,30);
}


};

0 个答案:

没有答案