从上到下在画布中滚动图像

Question

如何从上到下滚动图像位置。目前，它正在从左向右移动，并尝试交换“xpos”和“y”值，但图像变得扭曲。任何帮助都将受到赞赏。

(function() {
        window.requestAnimationFrame = window.requestAnimationFrame
                || window.webkitRequestAnimationFrame
                || window.mozRequestAnimationFrame
                || function(callback) { window.setTimeout(callback, 1000 / 60); };

        var canvas = document.getElementById('bg');
        var context = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var looping = false;
        var totalSeconds = 0;

        var img = new Image();
        img.onload = imageLoaded;
        img.src = 'https://preview.ibb.co/dpQ6Ak/test.jpg';

        function imageLoaded() {
            draw(0);
            startStop();
        }

        var lastFrameTime = 0;

        function startStop() {
            looping = !looping;

            if (looping) {
                lastFrameTime = Date.now();
                requestAnimationFrame(loop);
            }
        }

        function loop() {
            if (!looping) {
                return;
            }

            requestAnimationFrame(loop);

            var now = Date.now();
            var deltaSeconds = (now - lastFrameTime) / 1000;
            lastFrameTime = now;
            draw(deltaSeconds);
        }

      function draw(delta) {
            totalSeconds += delta;

            var vx = 100; // the background scrolls with a speed of 100 pixels/sec
            var numImages = Math.ceil(canvas.width / img.width) + 1;
            var xpos = totalSeconds * vx % img.width;

            context.save();
            context.translate(-xpos, 0);
            for (var i = 0; i < numImages; i++) {
                context.drawImage(img, i * img.width, 0);
            }
            context.restore();
        }
    }());

<canvas id="bg" ></canvas>

Answer 1

我想这是你的答案

＆＃13;

＆＃13;

(function() {
        window.requestAnimationFrame = window.requestAnimationFrame
                || window.webkitRequestAnimationFrame
                || window.mozRequestAnimationFrame
                || function(callback) { window.setTimeout(callback, 1000 / 60); };

        var canvas = document.getElementById('bg');
        var context = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var looping = false;
        var totalSeconds = 0;

        var img = new Image();
        img.onload = imageLoaded;
        img.src = 'https://preview.ibb.co/dpQ6Ak/test.jpg';

        function imageLoaded() {
            draw(0);
            startStop();
        }

        var lastFrameTime = 0;

        function startStop() {
            looping = !looping;

            if (looping) {
                lastFrameTime = Date.now();
                requestAnimationFrame(loop);
            }
        }

        function loop() {
            if (!looping) {
                return;
            }

            requestAnimationFrame(loop);

            var now = Date.now();
            var deltaSeconds = (now - lastFrameTime) / 1000;
            lastFrameTime = now;
            draw(deltaSeconds);
        }

      function draw(delta) {
            totalSeconds += delta;

            var vx = 100; // the background scrolls with a speed of 100 pixels/sec
            var numImages = Math.ceil(canvas.height / img.height) + 1;
            var xpos = totalSeconds * vx % img.height;

            context.save();
            context.translate( 0,xpos);
            for (var i = 0; i < numImages; i++) {
                context.drawImage(img, 0,-(i * img.height));
            }
            context.restore();
        }
    }());

＆＃13;

<canvas id="bg" ></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

绘制向任何方向移动的图像

    var imageScroll = scrollImage("myCan",1.57,60);
    setTimeout(randomScroll,10000);
    function randomScroll(){
        imageScroll.setSpeed( Math.random() * 60 + 20)
          .setDirection( Math.random() * Math.PI * 2);
          
        setTimeout(randomScroll,1000 + 2000 * Math.random());
    }
        
    
    
    
    
    function scrollImage(canvasId, direction, speed, URL){
        var w, h, iW, iH;  // alias for width and height, an image W H
        var x, y;          // current image pos;
        var lastTime;      // to track frame time
        var stop = false;  // when true stop
        const rAF = requestAnimationFrame;  // Alias
        const canvas = document.getElementById(canvasId);  
        if (canvas === null) { throw new ReferenceError("Can not find canvas with id : '" + canvasId + "'") }
        const ctx = canvas.getContext('2d');
        const img = new Image;

        w = canvas.width = innerWidth;
        h = canvas.height = innerHeight;
        x = y = lastTime = 0;
lastTime = 0;

        img.src = URL ? URL : 'https://preview.ibb.co/dpQ6Ak/test.jpg';
        img.onload = () => { 
            iW = img.width;
            iH = img.height;
            loop(0)
         }

        function loop(time) {
            var fTime = (time - lastTime) / 1000;       // get frame time
            lastTime = time;                       
            x += Math.cos(direction) * speed * fTime ;  // update position
            y += Math.sin(direction) * speed * fTime ;
            drawImageRep(x, y);                         // draw image at x,y
            if (!stop){ requestAnimationFrame(loop) }
        }
        function drawImageRep(x,y){
            x = ((x % iW) + iW) % iW;
            y = ((y % iH) + iH) % iH;

            for(var iy = y  - iH; iy < h; iy += iH){ 
                for(var ix = x  - iW; ix < w; ix += iW){ 
                    ctx.drawImage(img, ix, iy);
                }
            }
       }
       return {
           stop(){stop = true; return this },
           setSpeed(nSpeed){ speed = nSpeed; return this },
           setDirection(nDirection) { direction = nDirection; return this }, 
       }
    }

<canvas id="myCan"></canvas>