Question

Earth Rotation

您好我是Javascript和Jquery的新手。我想围绕太阳（图像）移动地球（图像），但我不想使用任何jQuery插件。我尝试了几个选项，但它没有用。所以如果有反正（我猜它是）那么请回答。在此先感谢

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

抱歉推迟上传代码。只有地球正在进入画布。不知道如何把太阳放在中心。

Answer 1

谢谢大家表现出兴趣。但我终于做到了。也许你想看到。

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

使用javascript或jQuery在另一个图像的中心旋转一个图像

1 个答案: