przewijanie/przesuwanie tła w płótnie html5

Question

Buduję grę na płótnie. W tym chcę przesunąć obraz tła w pętli. Nie wiem, jak to zrobić za pomocą javascript. Będę używał pojedynczego obrazu, który będzie przesuwał się ciągle w tle. Z góry dzięki.

Answer 1

Istnieje kilka sposobów, aby to osiągnąć, pierwszy z nich osiągnie wydajność za pomocą putImageData, druga metoda po prostu używa drawImage. Zauważ również, że druga metoda ma kod, który umożliwia przejście od lewej do prawej lub od prawej do lewej.

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

2-ta Metoda wykorzystuje ten sam kod jak wyżej, tylko zmienić te dwie funkcje poniżej.

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