Question

我有一个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();

Answer 1

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

如果背景是静态的（没有像水一样的活动部件或与它有任何交互）那么你可以将它一次性地绘制到屏幕上的画布（可见的画布），但是不要清楚帆布。这样，您的图块只会被处理并绘制一次。
第二种方法比第一种方法稍微困难一点，就是将部分绘制到屏幕外的画布上，目的是限制（重新）绘制调用。
您还可以使用“脏矩形”，这基本上只是更新显示的更改部分。这是迄今为止效率最难的解决方案。

背景代理奇怪的html5画布

1 个答案: