2012-06-12 36 views
5

Tôi đang xây dựng một trò chơi canvas. Trong này tôi muốn trượt hình nền trong một vòng lặp. Tôi không biết làm thế nào để làm điều này bằng cách sử dụng javascript. Tôi sẽ sử dụng hình ảnh đơn sẽ trượt liên tục vào nền. Cảm ơn trước.cuộn/trượt nền trong html5 canvas

+0

Tôi không chắc chắn bạn có thể liên tục trượt một hình ảnh - bạn có thể trượt hai nửa mà tham gia liên tục ở các cạnh. – Widor

+0

@Coulton không có lý do gì để sử dụng jQuery nó không làm gì với canvas. – Loktar

+0

@Widor Bạn nhất định có thể sử dụng một hình ảnh, bạn chỉ cần sao chép các phần của nó vào khung vẽ để tạo hiệu ứng liền mạch. – Loktar

Trả lời

11

Có một số cách để đạt được điều này, cách đầu tiên sẽ có hiệu suất đạt được bằng cách sử dụng putImageData, phương pháp thứ hai chỉ sử dụng drawImage. Cũng lưu ý rằng phương pháp thứ 2 có mã để làm cho nó đi hoặc từ trái sang phải, hoặc phải sang trái.

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 Phương pháp sử dụng mã tương tự như trên, chỉ cần thay đổi hai chức năng này như sau.

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

Xin chào Loktar, cảm ơn câu trả lời. Bạn có thể vui lòng cho tôi biết cách đảo ngược hướng (từ phải sang trái). Tôi đã thử nó nhưng không thành công. – rgolekar

+1

@ user1451031 Tôi đã chỉnh sửa câu trả lời của mình và thêm nó vào phương thức thứ hai dưới chú thích '// Để đi theo cách khác' vì phương pháp thứ 2 là phương thức hoạt động tốt hơn. – Loktar

+1

@ Loktar cảm ơn rất nhiều. Bạn đã cứu ngày của tôi :) – rgolekar