背景代理奇數HTML5畫布

Question

我有一個800 x 100的背景圖像，我試圖從中拉出一些部分（如sprite表）以生成背景，因為我印象中這是一種有效的處理方法（似乎也可以我可以玩耍並學習將來的背景知識！）

不過，它不起作用，在第一個動畫幀（我是通過放慢速度找到它的）中，它顯示了整個背景圖像的一半（不是我要使用的部分），然后將其向下移動了800像素，並顯示了第三幀消失了！

請幫助：/謝謝！

    var bricks = [0, 1, 1, 1, 1, 2];

    function createBackground() {
        for(var i = 0; i < bricks.length; i++) {
            drawBackground(bricks[i]);
        }

    }
    var bg = new Image();
    bg.src = 'bgsheet2.png';
    var srcX, srcY = 0,srcW = 100,srcH = 100,destX = 0,destY = canvas.height-100,destW = 100,destH = 100;

    function drawBackground(type) {

        switch(type) {
            case 1:
                srcX = 0;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
            case 2:
                srcX = 100;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
            case 3:
                srcX = 200;
                destX+=100;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                break;
            default:
                srcX = 300;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
        }
    }

     //this is in my main animation loop
    createBackground();

Answer 1

為了提高效率，您有以下常用解決方案。

1. 如果背景是靜態的（沒有可移動的部分，如水或與水沒有任何相互作用），則可以一次將其繪制到屏幕上的畫布（可見的畫布）上，但不要清除該畫布。 這樣，您的圖塊僅被處理並繪制一次。

2. 第二種方法比第一種困難一些，它是將部分繪制到屏幕外的畫布上，目的是限制您的（重新）繪制調用。

3. 您還可以使用“臟矩形”，這基本上是僅更新顯示更改部分的一種做法。 到目前為止，這是提高效率的最困難的解決方案。