环绕动画-月亮绕地球，地球绕太阳

张三不懂代码

于 2024-07-25 20:52:25 发布

阅读量2

点赞数

文章标签：前端 canva可画 html

本文链接：https://blog.csdn.net/qq_53353413/article/details/140699785

版权

<!DOCTYPE html>
<html  lang="en">
    <head>   
        <style>
            canvas {
                background-color: #545252;
                display:block;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <script>
            const canvas = document.createElement("canvas")
            canvas.width = 800;
            canvas.height = 800; document.body.append(canvas)
            const context = canvas.getContext("2d");

            // 地球旋转的角度
            let earthAngle = 0;
            // 月亮旋转角度
            let moonAngle = 0;

            function loop() {
                context.save()

                context.clearRect(0, 0, canvas.width, canvas.height);

                // 太阳
                context.beginPath();
                context.arc(400,400,100,0,2*Math.PI);
                context.fillStyle ="#e3fa14"
                context.shadowColor = "#e3fa14"
                context.shadowBlur = 10;
                context.fill();
                context.closePath();

                // 地球
                context.beginPath();
                // 原点移动到正中心
                context.translate(400,400)
                // 画笔旋转一个角度
                // context.rotate(0 * Math.PI / 180)
                context.rotate((earthAngle+=0.3)*Math.PI/180)
                // 为了月亮动画，将原点移动到与地球中心一致位置
                context.translate(200,0)
                context.arc(0, 0, 20, 0, 2 * Math.PI);
                context.fillStyle="blue";
                context.shadowColor="blue";
                context.fill()
                context.closePath();

                // 月亮
                context.beginPath();
                context.fillStyle="#fff"
                context.rotate((moonAngle++) * Math.PI / 180)
                context.arc(40,0,6,0,2*Math.PI);
                context.fill();
                context.closePath();

                context.restore()
                requestAnimationFrame(loop)
            }
            requestAnimationFrame(loop)
        </script>
    </body>
</html>