Question

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

有没有人对我怎么做呢？

非常感谢你的帮助！

大卫

Answer 1

编辑：测试完毕后，您需要删除此行：

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

Answer 2

更改

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

更改

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

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

while(true) {

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

2 个答案: