1

我有一个 800 x 100 的背景图像，我试图从中提取部分（如精灵表）以生成背景，因为我的印象是这是一种有效的方式（也似乎是我可以在未来玩弄并学习生成背景！）

但是它不起作用，在他的第一个动画帧中（我发现这是因为放慢了它）它显示了整个背景图像的一半（不是我想要使用的部分）然后它将它向下移动大概 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();
4

1 回答 1

0

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

  1. 如果背景是静态的（没有像水这样的移动部件或与它的任何交互），那么您可以一次将其绘制到屏幕上的画布（可见的画布）上，但不要清除该画布。这样，您的图块只会被处理和绘制一次。

  2. 第二种方法比第一种更难一点，是将部分绘制到屏幕外的画布上，目的是限制您的（重新）绘制调用。

  3. 您还可以使用“脏矩形”，这基本上是仅更新显示更改部分的做法。这是迄今为止最难的效率解决方案。

于 2012-07-15T22:37:23.850 回答