Question

我正在尝试在画布上创建一个移动对象，但每次设置间隔都会消失时，它会给出错误：“未定义更新”，即使更新的定义在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>

Answer 1

您似乎正在寻求使用全局变量，为什么不一直走？

http://jsfiddle.net/mblase75/8L62c/3/

var angle = 0.0;
var increment = 0.1;

function incrementAngle() {
    angle += increment;
    if (angle > Math.PI * 2) angle -= (Math.PI * 2);
}

function update() {
    incrementAngle();

    //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() {
    update();
    setInterval(update, 1000);
}

$(document).ready(function() {
    init();
});

Answer 2

不要在eval中使用字符串，因为它们是在全局范围内执行的，而您的函数是在document.ready处理程序中定义的。如果要提供参数，请使用匿名函数：

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

更新未定义？

2 个答案: