Rotate one Image on Center of another Image using javascript or jQuery

Question

Earth Rotation

Hello I am lilbit new to Javascript and Jquery. i want to move earth(image) around sun(image) but i dont want to use any jQuery-plugin. I have tried few Option but it is not working. So If there is anyway(i guess it is) then plz answer. Thanks in Advance

<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>

sorry for delay to upload code.only earth is moving into canvas.dont know how to put sun in center.

Why are you opposed to using a plugin? I'm sure you could easily find a carousel plugin to accomplish this. — AndyWarren, Apr 10 '14 at 13:54
@Andy Warren:I have done that using plugin.but i want to learn so every time i wont be depend on Plugin — Kiranaditya, Apr 10 '14 at 14:06
FreeAsInBeer:i just added jquery library but as you can see i just used that to make document ready only.Remaining code is in Javascript only.So if u have any option regarding Library then plz give a solution.thanks — Kiranaditya, Apr 11 '14 at 13:25
@ JaeeunLee :sorry for delay..i added code here.so u can have a look in it. — Kiranaditya, Apr 11 '14 at 13:27

score 1 · Answer 1 · answered Apr 11 '14 at 13:39

Thank you all to showing interest.But i finally did it.perhaps you would like to see.

<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;
}

.sunimg{
position:absolute;
left:40%;
top:40%;


}
</style>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("#Aditya").addClass("sunimg");
    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>

</canvas>
<img src="sun.jpg" alt="Sun" id="Aditya"></img>
</body>

Rotate one Image on Center of another Image using javascript or jQuery

1 Answers1