html - html5 Canvas 中的滚动/滑动背景

Question

我正在构建 Canvas 游戏。在此我想循环滑动背景图像。我不知道如何使用 javascript 执行此操作。我将使用将连续滑入背景的单个图像。 提前致谢。

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

2nd Method使用与上面相同的代码，只是将这两个函数更改为以下。

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