帆布地球仪停止“旋转”.经过12次迭代

Canvas globe stops "spinning" after 12 iterations.

本文关键字：经过 12次迭代旋转地球仪帆布更新时间：2023-09-26

我有一点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>

谁有什么建议我该怎么做?

非常感谢你的帮助!

大卫

编辑:在测试完所有需要做的事情后，删除这一行:

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

变化

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

改变

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

如果你想让它永不停止旋转那么你可以输入

while(true) {