fondo de desplazamiento/deslizamiento en lienzo html5

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 hacia el fondo. Gracias por adelantado.

preguntado el 12 de junio de 12 a las 12:06

No estoy seguro de que pueda deslizar continuamente una imagen; podría deslizar dos mitades que se unen sin problemas en los bordes. -

@Coulton no hay razón para usar jQuery, no hace nada con el lienzo. -

@Widor Definitivamente puede usar una imagen, simplemente copie partes de ella en el lienzo creando el efecto perfecto. -

1 Respuestas

Hay algunas maneras de lograr esto, la primera tendrá un impacto en el 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 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);
    }

2do método usa el mismo código que el anterior, simplemente cambie estas dos funciones a las siguientes.

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

Respondido el 13 de junio de 12 a las 13:06

Hola Loktar, gracias por la respuesta. ¿Podría decirme cómo invertir la dirección (de derecha a izquierda)? Lo intenté pero sin éxito. - golekar

@ user1451031 Edité mi respuesta y la agregué al segundo método debajo del comentario //To go the other way ya que el 2º método es el que mejor se comporta. - Loktar

Muchas gracias ! Intento usar el segundo método y el bloque inverso ("de derecha a izquierda"). El problema que tengo es que necesito posicionar mis imágenes, pero si agrego los parámetros 2, 6, 7 y 8 a dibujarImagen, se invierte y vuelve a ir de izquierda a derecha. Muy, muy raro. ¿Alguna idea al respecto? - Gordon

Sobre mi comentario anterior, finalmente logré hacerlo: stackoverflow.com/a/29731069/782013 - Gordon

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.