Question

我正在尝试使用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的新手所以任何洞察力都会受到高度赞赏。

Answer 1

如果您没有将字符串传递给setInterval，那么代码将起作用。因为它在一个字符串中，所以它不能为你试图使用的变量创建一个闭包。

请改为尝试：

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

使用此方法，您将匿名函数传递给setInterval。它将在每个间隔调用此函数一次，在此示例中为1000毫秒。

该函数可以使用colors，ctx和canvas变量，因为它们存在于声明函数的范围内。这会创建一个闭包，以便在一遍又一遍地调用这些变量时（就我们的匿名函数而言）。

目前，您可以使用此代码。为了进一步理解，我建议研究匿名函数和闭包。

Answer 2

您可以直接传递函数而不是要评估的字符串，如

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

祝你好运引发癫痫病

Answer 3

当执行区间代码时，根问题是变量范围，颜色和其他变量不在范围内。

试试这个：

<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>

Answer 4

试试这个更新 setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

setInterval和未定义的参数有问题

4 个答案: