Javascript 画布-如何进行背景图像移动_Javascript

Javascript 画布-如何进行背景图像移动

javascript

Javascript 画布-如何进行背景图像移动,javascript,Javascript,我希望背景图像保持从左向右移动。知道我该怎么做吗？我试着使用stackoverflow的代码，但没用，我试着谷歌，没用。这是我的密码。这里没有关于移动背景的内容，我只是把它放在这里，因为它可能会有所帮助。我想知道为什么任何代码都不起作用 <!DOCTYPE html> <html dir='ltr'> <head> <title>Temponary Rush</title> <meta

我希望背景图像保持从左向右移动。知道我该怎么做吗？我试着使用stackoverflow的代码，但没用，我试着谷歌，没用。这是我的密码。这里没有关于移动背景的内容，我只是把它放在这里，因为它可能会有所帮助。我想知道为什么任何代码都不起作用

<!DOCTYPE html>
<html dir='ltr'>
    <head>
        <title>Temponary Rush</title>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <script type='text/javascript' src='js/classes.js'></script>
        <style>
        body {
            background-color: #232B2B;
            background-image:url('../web/css/cave-background.png');
            background-position:top;
            background-repeat:no-repeat;
            color:#FFFFFF; 
        }
        #container{
            flex-flow: row nowrap;
            display: -webkit-flex; 
            -webkit-justify-content: space-around; 
            display: flex;
            justify-content: space-around;

        }
        #container > div {
            background: #5F85DB;
            padding: 5px;
            color: #fff;
            font-weight: bold;
            font-family: Tahoma;
            border:5px inset #DC3D24;
            background-color:#232B2B;
        }
        #container > .advert {
            width:200px;
        }
        canvas {
            background-image:url('imgs/backgrounds/cave-bcg.png');
            background-position:center;
        }
        </style>

    </head>
    <body>
        <div id='container'>
            <div id='left' class='advert'>
                levá strana
            </div>
            <div id='center'>
                <canvas id="ctx" width="800" height="600"></canvas>
                <script type='text/javascript'>  

                    var ctx = document.getElementById("ctx").getContext("2d");
                    ctx.font = '30px Arial';
                    ctx.fillStyle = 'white';

                    var player = {
                        x: 10,
                        y: 549,
                        spdX: 1,
                        spdY: 51,
                        width:50,
                        height:50
                    };

                    var obstacles = [

                    ];

                    var allowedJump = true;
                    document.onkeydown = function(event){
                        if (event.keyCode === 32 && allowedJump) {
                            for(i; i<10;i++){
                                setTimeout(function(){
                                    player.y-= player.spdY/10;   
                                },60);
                            }
                            setTimeout(function(){
                                allowedJump = true;
                                player.y+=player.spdY;
                            },600);
                        };
                        allowedJump = false; 
                    };

                    setInterval(update,10);
                    function update(){
                        ctx.clearRect(0,0,800,600,45);   
                        ctx.fillRect(player.x, player.y, player.width, player.height);
                        player.x += player.spdX;
                        for(i = 0; i < obstacles.length; i++) {
                            ctx.fillRect(obstacles[i][0], obstacles[i][1], obstacles[i][2], obstacles[i][3]);
                            var is_colliding = collision.testCollision(player,obstacles[i][0], obstacles[i][1],obstacles[i][2],obstacles[i][3]);
                            if(is_colliding) {
                                afterImpact.stun(2,player);
                            }
                        }
                    }
                </script>
            </div>
            <div id='right' class='advert'>
                pravá strana
            </div>
        </div>
    </body>
</html>

我现在在xampp服务器上有这个网站，稍后我将转到node.js服务器。这是我的文件树。

您可以在body标记内设置以下div代码

   div{
        background-color: #232B2B;
        background-image:url('../web/css/cave-background.png');
        background-position:top;
        background-repeat:no-repeat;

       }

如果我这样做有什么帮助？我的背景颜色将消失body tag background是固定的，因此我们无法修改，替代方法是您必须根据body大小设置div，并使用css相应地设置div。好的，我确实修改了代码，但主要的问题是如何做移动背景请参考此代码并进行相应修改。。div{width:100px；height:100px；背景：红色；过渡：2s；-webkit过渡：2s；-moz过渡：2s；位置：绝对；右侧：calc100%-100px；}div:hover{right:0；}

   div{
        background-color: #232B2B;
        background-image:url('../web/css/cave-background.png');
        background-position:top;
        background-repeat:no-repeat;

       }