canvas实现动画 地球绕太阳公转 月球绕地球公转

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
</head>

<body>
    <div>
        地球公转速度：
        <input type="input" value="60" id="m-earth-speed"> 月球公转速度：
        <input type="input" value="6" id="m-moon-speed">
        <input type="button" id="m-btn" value='设置'>
    </div>
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            ctx, earchSpeed = 60,
            moonSpeed = 6;

        var dom = {
            earchSpeed: $('#m-earth-speed'),
            moonSpeed: $('#m-moon-speed'),
            btn: $('#m-btn'),
            canvas: $('#myCanvas')
        };

        $.extend(myAction, {
            initCanvas: function() {
                ctx = dom.canvas[0].getContext("2d");
                myAction.draw();
            },
            draw: function() {
                ctx.clearRect(0, 0, 300, 300); //清空所有的内容

                ctx.fillRect(0, 0, 300, 300);
                //绘制太阳
                ctx.save();
                ctx.beginPath();
                ctx.fillStyle = "yellow";
                ctx.arc(150, 150, 20, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();


                ctx.save();
                ctx.translate(150, 150);

                //绘制地球轨道
                ctx.beginPath();
                ctx.strokeStyle = "rgba(255,255,0,0.5)";
                ctx.arc(0, 0, 100, 0, 2 * Math.PI);
                ctx.stroke()

                var time = new Date();
                //绘制地球
                ctx.rotate(2 * Math.PI / earchSpeed * time.getSeconds() + 2 * Math.PI / (earchSpeed * 1000) * time.getMilliseconds());
                ctx.translate(100, 0);
                ctx.beginPath();
                ctx.fillStyle = "blue";
                ctx.arc(0, 0, 10, 0, Math.PI * 2);
                ctx.fill();

                //绘制月球轨道
                ctx.beginPath();
                ctx.strokeStyle = "rgba(255,255,255,.3)";
                ctx.beginPath();
                ctx.arc(0, 0, 40, 0, 2 * Math.PI);
                ctx.stroke();

                //绘制月球
                ctx.rotate(2 * Math.PI / moonSpeed * time.getSeconds() + 2 * Math.PI / (moonSpeed * 1000) * time.getMilliseconds());
                ctx.translate(40, 0);
                ctx.fillStyle = "#ffffff";
                ctx.beginPath();
                ctx.arc(0, 0, 4, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();

                requestAnimationFrame(myAction.draw);
            },
            initEvent: function() {
                dom.btn.on('click', function() {
                    earchSpeed = dom.earchSpeed.val() - 0;
                    moonSpeed = dom.moonSpeed.val() - 0;
                });
            }
        });
        var init = function() {
            myAction.initCanvas();
            myAction.initEvent();
        }();
    })
    </script>
</body>

</html>

 

posted @ 2018-09-28 14:27  徐同保  阅读(998)  评论(0)  编辑  收藏  举报