이미지를 위에서 아래로 캔버스로 스크롤

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

이 어떤 방향으로 움직이는 이미지를 그리기 답

(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(); 
 
     } 
 
    }());

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

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>