0

地球の自転

こんにちは、Javascript と Jquery の初心者です。太陽（画像）の周りに地球（画像）を移動したいのですが、jQueryプラグインを使用したくありません。私はいくつかのオプションを試しましたが、うまくいきません。とにかくある場合（あると思います）、plz答えてください。前もって感謝します

<html>
<head>
<style type="text/css">
body {
background-color: ivory;
}

canvas {
position:absolute;
left:15%;
top:5%;
margin-left:center;
margin-top:center;
background-color:black;
border:1px solid red;
}

#Aditya{
position:relative;
top:25%;
left:20%;

}
</style>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

    var canvas = document.getElementById("icanvas");
    var ctx = canvas.getContext("2d");

    var radianAngle = 0;
    var cx = 400;
    var cy = 400;
    var radius = 230;

    var img = document.getElementById("myearth");
    img.height="5px";
    img.width="5px";
    img.onload = start;

    function start() {
        animate();
    }

    function animate() {
        requestAnimationFrame(animate);

        // Drawing code goes here
        radianAngle +=Math.PI / 120;
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // draw the image rotated around the circumference
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(radianAngle);
        ctx.drawImage(img, radius - img.width / 2, -img.height/2);
        ctx.restore();
    }
}); 
</script>

</head>
<body>
<canvas id="icanvas" width="800px" height="800px">
<img src="earth.jpg" alt="earth" id="myearth" width="50%" height="50%"></img>
<img src="sun.jpg" alt="Sun" id="Aditya"></img>
</canvas>
</canvas>
</body>

コードのアップロードが遅れて申し訳ありません。地球だけがキャンバスに移動しています。太陽を中央に配置する方法がわかりません。

4

1 に答える 1