使畫布圖像重復向上滾動

Question

所以我有一個 600x2400 的圖像，我試圖向上滾動（角色將自動在屏幕上向下運行）並重復。 我有滾動，但沒有重復。 我的問題是，如何使圖像從頂部重新繪制第二個實例，並在我到達這個實例的末尾時繼續？ 到目前為止，當代碼到達圖像的末尾時，我只是得到了第一個實例滾動底部的交錯重復。

JS

let canvas;
let context;
let secondsPassed;
let oldTimeStamp;
let fps;
let map = new Image();
let roadMovement = 0;
let increment = 2;


window.onload = init;

function init() {
    canvas = document.getElementById('gameCanvas');
    context = canvas.getContext('2d');


    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    window.requestAnimationFrame(gameLoop);
}

function draw() {
    map.src = "map.png";

}


function gameLoop(timeStamp) {
    secondsPassed = (timeStamp - oldTimeStamp) / 1000;
    oldTimeStamp = timeStamp;
    fps = Math.round(1 / secondsPassed);



    roadMovement += increment;

    map.onload = function () {
        context.drawImage(map, 0, roadMovement, 600, 600, 0, 0, canvas.width, canvas.height);
        
    };

    draw();
    window.requestAnimationFrame(gameLoop);
}

CSS

body{
    position: absolute;
    width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#gameCanvas{
    position: relative;
    left:0;
    top:0;
    margin:0;
    padding:0;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas">
    </canvas>

    <script src="script.js"></script>
</body>
</html>

編輯添加了讓增量值，因此可以更改自動滾動速度。

Answer 1

直接在 CSS 中將圖片作為頁面背景如何？

嘗試這個：

   body{
        position: absolute;
        width:100vw;
        height:1000vh;
        margin:0;
        padding:0;
        display: flex;
        justify-content: center;
        align-items: center; 
        
        background-image: url('./map.png'); 
        background-repeat: repeat;       
        background-size: 100%;  /*scale the image at 100% of the page width*/
    }

Answer 2

您可以繪制兩次地圖圖像並在roadMovement變得大於圖像高度時重置它。 那時您知道整個圖像在畫布視圖之外。

從技術上講，您只需要在imageHeight - roadMovement < canvasHeight時繪制第二張圖像，但可能不值得優化。

 let canvas; let context; let secondsPassed; let oldTimeStamp; let fps; let map = new Image(600, 600); map.onload = init; map.src = "http://www.secretdoors.com/playit/resources/chessboard.gif"; let roadMovement = 0; let increment = 2; function init() { canvas = document.getElementById('gameCanvas'); context = canvas.getContext('2d'); canvas.width = 150; canvas.height = 150; window.requestAnimationFrame(gameLoop); } function gameLoop(timeStamp) { secondsPassed = (timeStamp - oldTimeStamp) / 1000; oldTimeStamp = timeStamp; fps = Math.round(1 / secondsPassed); roadMovement += increment; roadMovement %= map.naturalHeight; const y1 = roadMovement; const y2 = y1 - map.naturalHeight; context.clearRect(0, 0, 600, 600); context.drawImage( map, 0, y1, map.naturalWidth, map.naturalHeight ); context.drawImage( map, 0, y2, map.naturalWidth, map.naturalHeight ); window.requestAnimationFrame(gameLoop); }

 #gameCanvas{ width: 150px; height: 150px; border: 1px solid red; }

 <canvas id="gameCanvas"> </canvas>

使畫布圖像重復向上滾動

問題描述

2 個解決方案

解決方案1
0 2022-05-25 00:20:01

解決方案2
0 已采納 2022-05-25 09:56:16

使畫布圖像重復向上滾動

問題描述

2 個解決方案

解決方案1 0 2022-05-25 00:20:01

解決方案2 0 已采納 2022-05-25 09:56:16

解決方案1
0 2022-05-25 00:20:01

解決方案2
0 已采納 2022-05-25 09:56:16