Fatal编程技术网

Javascript 更新未定义？

javascript html html5-canvas

Javascript 更新未定义？,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我试图在画布上创建一个移动的对象，但每次设置的间隔消失时，都会出现错误：“更新未定义”，即使更新的定义在init之前。如何设置正确调用更新的间隔 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <meta name=

我试图在画布上创建一个移动的对象，但每次设置的间隔消失时，都会出现错误：“更新未定义”，即使更新的定义在init之前。如何设置正确调用更新的间隔

<!doctype html>  
<html lang="en">  
    <head>  
          <meta charset="utf-8">  
          <title>Test</title>  
          <meta name="description" content="An HTML5 Test">  
          <meta name="author" content="William Starkovich">  
          <link rel="stylesheet" href="css/styles.css?v=1.0">
          <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                var angle = 0.0;
                var increment = 0.1;

                function incrementAngle(angle, increment){
                    angle += increment;

                    if(angle > Math.PI * 2)
                        angle -= (Math.PI * 2);
                }

                function update(angle, increment){
                    incrementAngle(angle, increment);

                    //get a reference to the canvas
                    var ctx = $('#canvas')[0].getContext("2d");
                    //draw a circle
                    ctx.strokeStyle = "#000000";
                    ctx.beginPath();
                    ctx.arc(20, 20, 15, angle, angle + Math.PI, true);
                    ctx.lineWidth = 5;
                    ctx.stroke();
                    ctx.closePath();
                }

                function init(angle, increment){  
                  update(angle, increment) 
                  setInterval("update(angle, increment)",1000);  
                } 

                init(angle, increment);

            });
          </script>    
    </head>  
    <body>  
         <canvas id="canvas" width="800px" height="100px">
        <p>Your browser doesn't support canvas.</p>
        </canvas>
    </body>  
</html> 


试验
$（文档）.ready（函数（）{
var角=0.0；
var增量=0.1；
函数增量角度（角度，增量）{
角度+=增量；
如果（角度>数学PI*2）
角度-=（数学PI*2）；
}
函数更新（角度、增量）{
增量角度（角度，增量）；
//获取对画布的引用
var ctx=$（'#canvas'）[0].getContext（“2d”）；
//画圈
ctx.strokeStyle=“#000000”；
ctx.beginPath（）；
ctx.arc（20,20,15，角度，角度+数学PI，真）；
ctx.lineWidth=5；
ctx.stroke（）；
ctx.closePath（）；
}
函数init（角度，增量）{
更新（角度、增量）
设置间隔（“更新（角度，增量）”，1000；
} 
初始值（角度，增量）；
});
您的浏览器不支持画布
不要在
eval
中使用字符串，因为它们是在全局范围内执行的，并且您的函数是在document.ready处理程序中定义的。如果要提供参数，请使用匿名函数：

setInterval(function() { update(angle, increment); } ,1000);
不要在
eval
中使用字符串，因为它们是在全局范围内执行的，并且您的函数是在document.ready处理程序中定义的。如果要提供参数，请使用匿名函数：

setInterval(function() { update(angle, increment); } ,1000);
您似乎希望使用全局变量，那么为什么不一直使用呢

您似乎希望使用全局变量，那么为什么不一直使用呢

这会不会一次又一次地传递相同的角度和增量到
update
？@mblase75不会。它每次都调用匿名函数，因为它正在传递变量的值，如果这些变量改变，它将传递的值也会改变。有两个问题-更新的范围和变量的范围。通过将
eval
ed代码更改为闭包，可以解决
update
范围问题。mblase75的解决方案解决了变量范围问题，该解决方案从函数签名中删除了参数。OP只是更改全局变量的本地副本，而不是全局变量本身。这会不会不断地将相同的角度和增量传递给
更新
？@mblase75不，不会。它每次都调用匿名函数，因为它正在传递变量的值，如果这些变量改变，它将传递的值也会改变。有两个问题-更新的范围和变量的范围。通过将
eval
ed代码更改为闭包，可以解决
update
范围问题。mblase75的解决方案解决了变量范围问题，该解决方案从函数签名中删除了参数。OP只是更改全局变量的本地副本，而不是全局变量本身。