画布地球在 12 次迭代后停止“旋转”。答案

【问题标题】：Canvas globe stops "spinning" after 12 iterations.画布地球在 12 次迭代后停止“旋转”。
【发布时间】：2011-10-15 12:46:07
【问题描述】：

我的 Javascript 有点问题。

我希望此页面上的地球继续旋转：http://www.davidsgorbati.co.uk/testarea/cbdesign.co.uk/canvas_experiments/animate_3.php

不幸的是，在 12 次迭代后，它停止了……我尝试了各种方法，但似乎没有任何效果。

这是它的代码：

    <title>Javascript Demos</title>

    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">


            $(document).ready(function() {

            var c = document.getElementById("myCanvas");
            var cxt = c.getContext("2d");

            var refAngle = 0;

            setInterval(progressMeridien,100);

            function progressMeridien() {
            c.width = c.width
            cxt.beginPath();

                    cxt.arc(300, 300, 300, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.strokeStyle = "rgba(150, 119, 78, 0.6)";
                    cxt.stroke();


            for (var i = 0; i<12; i++) {

                var angle = (refAngle + i*(Math.PI/12)) % Math.PI;

             cxt.beginPath();

              cxt.moveTo(300, 0); // A1

              var r = 390 - Math.sin(angle) * 100;
                  var xOffset = r * Math.cos(angle);
                  var yOffset = r * Math.sin(angle);


              cxt.bezierCurveTo(
                300 + xOffset , 0 + yOffset , // C1
                300 + xOffset , 600 - yOffset , // C2
                300, 600); // A2

                    cxt.strokeStyle = "rgba(150, 119, 78, 0.6)";
                    cxt.stroke();

            }
            refAngle = refAngle + (Math.PI/120)
                if (refAngle > Math.PI) refAngle = 10;

                //create horizontal lines
                cxt.beginPath();                    
                cxt.moveTo(40,450);
                cxt.quadraticCurveTo(300,550,560,450);
                cxt.stroke();
                cxt.closePath();


                cxt.beginPath();                    
                cxt.moveTo(0,300);
                cxt.quadraticCurveTo(300,400,600,300);
                cxt.stroke();
                cxt.closePath();

                cxt.beginPath();                    
                cxt.moveTo(40,150);
                cxt.quadraticCurveTo(300,250,560,150);
                cxt.stroke();
                cxt.closePath();

            }

            });

        </script>




        <style type="text/css">
            body {
            line-height: 1;
            background-color: #332a85;
            font-family: verdana, arial, sans-serif;
            color: #b48f3e;
            font-size: 12px;
            line-height: 18px;
            }
        </style>

<body>
    <!--<img src="img/test_writing.png" style="position: absolute; top: 120px; left: 120px; "/>-->
    <canvas width="600" height="600" id="myCanvas" ></canvas><br/>

    </div>
</body>

有人对我该如何做有任何建议吗？

非常感谢您的帮助！

大卫

【问题讨论】：

标签： javascript jquery html loops canvas

【解决方案1】：

编辑：测试完所有你需要做的，删除这一行：

if (refAngle > Math.PI) refAngle = 10;

【讨论】：

非常感谢乔伊，解决了它！

【解决方案2】：

改变

for (var i = 0; i<12; i++) {

改变

i<12 to i<(whatever number you like here)

如果你希望它永远不会停止旋转，那么你可以这样做

while(true) {

【讨论】：