1

canvas 要素を使用してブラウザで基本的なストロボ ライトを作成しようとしています。setInterval が changeBG 関数を呼び出し続けて、ランダムな背景色に変更されることを期待しています。この関数は、単独では正常に機能しますが、setInterval によって呼び出された場合は機能しません。このページを firebug でプルアップしようとしたところ、色が定義されていないことがわかりました。これが問題のコードです。

<html>
<head>
    <title>Strobe!</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <script type="text/javascript">
        function changeBG(colors,ctx,canvas) {                
            ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
            ctx.fillRect(0,0,canvas.width,canvas.height)
        }

        function eventLoop() {
            var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
            var canvas = document.getElementById('mainCanvas')
            var ctx = canvas.getContext('2d')
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight
            //changeBG(colors,ctx,canvas)
            setInterval("changeBG(colors,ctx,canvas)", 1000);               
        }
    </script>
</head>
<body onload="eventLoop()">
    <canvas id="mainCanvas" width="800" height="600">
    </canvas>
</body>

私はjavascriptが初めてなので、どんな洞察も高く評価されます。

4

4 に答える 4

7

文字列を setInterval に渡さなければ、コードは機能します。文字列であるため、使用しようとしている変数にクロージャーを作成できません。

代わりにこれを試してください：

setInterval(function() {
    changeBG(colors,ctx,canvas);
}, 1000)​;​

このメソッドを使用して、無名関数を setInterval に渡します。この関数は、間隔 (この例では 1000 ミリ秒) ごとに 1 回呼び出されます。

関数は、関数が宣言されているスコープに存在するため、colors、ctx、および canvas 変数を使用できます。これによりクロージャーが作成され、何度も呼び出されたときにこれらの変数が (匿名関数に関する限り) 存在し続けるようになります。

今のところ、おそらくこのコードをそのまま使用できます。さらに理解を深めるために、無名関数とクロージャーを調査することをお勧めします。

于 2010-08-11T21:17:38.153 に答える
0

評価する文字列の代わりに、関数を直接渡すことができます。

setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

誰かにてんかんを誘発する幸運

于 2010-08-11T21:11:40.300 に答える
0

根本的な問題は、間隔コードが実行されるときの可変スコープであり、色やその他の変数はスコープ内にありません。

これを試して：

<html>
<head>
<title>Strobe!</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script type="text/javascript">           
    function eventLoop() {
        var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
        var canvas = document.getElementById('mainCanvas')
        var ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight            
        setInterval(function() {                
            ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
            ctx.fillRect(0,0,canvas.width,canvas.height)
        }, 1000);               
    }    
</script>
</head>
<body onload="eventLoop()">
    <canvas id="mainCanvas" width="800" height="600">
    </canvas>
</body>
于 2010-08-11T21:14:55.533 に答える
-1

これを試してください setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

于 2010-08-11T21:10:44.093 に答える