1

我正在尝试使用 canvas 元素在浏览器中创建一个基本的频闪灯。我期待 setInterval 继续调用 changeBG 函数以更改为随机背景颜色。这个函数本身就可以正常工作，但当被 setInterval 调用时就不行了。我尝试在萤火虫中拉出此页面，它告诉我颜色未定义。这是有问题的代码。

<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 毫秒。

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

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

于 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 回答