setTimeout with canvas

Question

我正在尝试使用画布运行动画背景。目前，setTimeout在Chrome Uncaught SyntaxError: Unexpected identifier中显示错误。我必须动画错误。

当我删除setTimeout并且只有tiles()时，一切正常（即没有动画，但显示我想要的正确背景）。所以我相信，它与setTimeout.

有关

有人为我提供线索吗？

function createBackground(){        
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            background = $('#game .background')[0],
            rect = background.getBoundingClientRect(), //returns the dimension of background
            gradient,
            m = monster.settings.monsterSize;

        canvas.width = rect.width;
        canvas.height = rect.height;

        /* create checker */
        tile_cols = canvas.width / m;
        tile_rows = canvas.height / m;

        setTimeout(tiles(ctx, m, tile_cols, tile_rows), 300);

        /* add canvas to html element */
        background.appendChild(canvas); 
    }

    function tiles(ctx, m, tile_cols, tile_rows){
        for (var i=0; i<tile_cols; i++){
            for (var j=0; j<tile_rows; j++){
                var x = Math.ceil(Math.random()*3);

                switch(x){
                    case 1:
                        ctx.fillStyle = 'black';
                        break;

                    ....

                    case 3:
                        ctx.fillStyle = '#00080E';
                        break;  
                }

                ctx.strokeStyle = 'black';
                ctx.beginPath(); 
                ...
                ctx.closePath();

                ctx.fill();
                ctx.stroke();

            };
        };      

        return this;
    }

Answer 1

您将tiles(ctx, m, tile_cols, tile_rows)的结果分配给setTimeout的第一个参数

将其更改为

setTimeout(function() {
    tiles(ctx, m, tile_cols, tile_rows)
}, 300);

您应该查看requestAnimationFrame来执行此任务。 Paul Irish写了一篇关于它的good article。