2
私には問題を与えているJavascriptが少しあります。キャンバスの地球儀は12回の繰り返しの後で「回転」しなくなります。
私はスピニングに保つために、このページの地球を希望：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>
どのように私はそれについて行くことができるかについての提案はありますか？
ありがとうございました！
デビッド
ありがとう、それはそれを固定しました！ – David