एचटीएमएल 5 कैनवास में स्क्रॉलिंग/स्लाइडिंग पृष्ठभूमि

Question

मैं एक कैनवास गेम बना रहा हूं। इसमें मैं पृष्ठभूमि छवि को लूप में स्लाइड करना चाहता हूं। मुझे नहीं पता कि जावास्क्रिप्ट का उपयोग करके इसे कैसे किया जाए। मैं एक छवि का उपयोग करूँगा जो लगातार पृष्ठभूमि में स्लाइड करेगा। अग्रिम धन्यवाद।

Answer 1

इसे प्राप्त करने के कुछ तरीके हैं putImageData का उपयोग करके प्रदर्शन हिट लेंगे, दूसरी विधि केवल drawImage का उपयोग करती है। यह भी ध्यान दें कि दूसरी विधि में कोड को बाएं से दाएं, या दाएं से बाएं जाने के लिए कोड है।

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 विधि उपर दिए गए कोड का उपयोग करता है, बस निम्नलिखित करने के लिए इन दो कार्यों बदल जाते हैं।

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