desplazamiento/deslizamiento de fondo en lienzo html5

Question

Estoy construyendo un juego de lienzo. En esto quiero deslizar la imagen de fondo en un bucle. No sé cómo hacer esto usando javascript. Usaré una sola imagen que se deslizará continuamente en el fondo. Gracias de antemano.

Answer 1

Hay algunas maneras de lograr esto: el primero tendrá un golpe de rendimiento usando putImageData, el segundo método solo usa drawImage. También tenga en cuenta que el segundo método tiene el código para hacer que vaya de izquierda a derecha o de derecha a izquierda.

http://www.somethinghitme.com/projects/bgscroll/

var ctx = document.getElementById("canvas").getContext("2d"), 
    canvasTemp = document.createElement("canvas"), 
    scrollImg = new Image(), 
    tempContext = canvasTemp.getContext("2d"), 
    imgWidth = 0, 
    imgHeight =0, 
    imageData = {}, 
    canvasWidth = 600, 
    canvasHeight = 240, 
    scrollVal = 0, 
    speed =2; 

    scrollImg.src = "citybg.png"; 
    scrollImg.onload = loadImage; 

    function loadImage(){ 
     imgWidth = scrollImg.width, 
     imgHeight = scrollImg.height; 
     canvasTemp.width = imgWidth; 
     canvasTemp.height = imgHeight;  
     tempContext.drawImage(scrollImg, 0,0, imgWidth, imgHeight); 
     imageData = tempContext.getImageData(0,0,imgWidth,imgHeight); 
     render();     
    } 

    function render(){ 
     ctx.clearRect(0,0,canvasWidth,canvasHeight); 

     if(scrollVal >= canvasWidth-speed){ 
      scrollVal = 0; 
     } 

     scrollVal+=speed; 

     // This is the bread and butter, you have to make sure the imagedata isnt larger than the canvas your putting image data to. 
     imageData = tempContext.getImageData(canvasWidth-scrollVal,0,scrollVal,canvasHeight); 
     ctx.putImageData(imageData, 0,0,0,0,scrollVal, imgHeight); 
     imageData = tempContext.getImageData(0,0,canvasWidth-scrollVal,canvasHeight); 
     ctx.putImageData(imageData, scrollVal,0,0,0,canvasWidth-scrollVal, imgHeight); 

     setTimeout(function(){render();},10); 
    } 

segundo método utiliza el mismo código que el anterior, sólo cambia estas dos funciones a la siguiente.

http://www.somethinghitme.com/projects/bgscroll/scrolldrawimage.html

function loadImage(){ 
    imgWidth = scrollImg.width, 
    imgHeight = scrollImg.height; 
    canvasTemp.width = imgWidth; 
    canvasTemp.height = imgHeight;  
    render();     
} 

function render(){ 
    ctx.clearRect(0,0,canvasWidth,canvasHeight); 

    if(scrollVal >= canvasWidth){ 
     scrollVal = 0; 
    } 

    scrollVal+=speed;     
    ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,scrollVal,imgHeight, 0, 0, scrollVal,imgHeight); 
    ctx.drawImage(scrollImg,scrollVal,0,imgWidth, imgHeight); 

    // To go the other way instead 
    ctx.drawImage(scrollImg,-scrollVal,0,imgWidth, imgHeight); 
    ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,imgWidth, imgHeight); 

    setTimeout(function(){render();},10); 
}