我有一点 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;
关于javascript - Canvas 地球在 12 次迭代后停止在 "spinning"。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6866345/