HTML5 之太阳系 - JavaScript论坛

问题点数：0 回复次数：11

HTML5 之太阳系

<!DOCTYPE html>

<html lang="en" xmlns="http://www.
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <canvas width="800" height="800" style="background-color:#000;" id="em"></canvas>
    <script>
        var time = 0, gc = document.getElementById('em').getContext('2d');
        //行星参数，days公转周期，incolor渐变内色，outcolor渐变外色，orbit轨道半径，planet行星半径，start起始位置（弧度）
        var planets = [
            { days: 87.7, incolor: 'rgb(166,150,151)', outcolor: 'rgb(93,62,64)', orbit: 50, planet: 2, start: 0 },
            { days: 224.7, incolor: 'rgb(196,187,172)', outcolor: 'rgb(31,19,21)', orbit: 70, planet: 4, start: 0 },
            { days: 365.24, incolor: 'rgb(120,177,232)', outcolor: 'rgb(5,12,18)', orbit: 90, planet: 5, start: 0 },
            { days: 686.98, incolor: 'rgb(206,201,182)', outcolor: 'rgb(118,66,45)', orbit: 120, planet: 3, start: 0 },
            { days: 4332.59, incolor: 'rgb(192,164,143)', outcolor: 'rgb(50,34,34)', orbit: 175, planet: 15, start: 0 },
            { days: 10759.5, incolor: 'rgb(247,249,227)', outcolor: 'rgb(92,69,51)', orbit: 235, planet: 12, start: 0 },
            { days: 30799.1, incolor: 'rgb(167,225,228)', outcolor: 'rgb(25,36,58)', orbit: 305, planet: 10, start: 0 },
            { days: 60152, incolor: 'rgb(6,97,178)', outcolor: 'rgb(30,59,115)', orbit: 385, planet: 9, start: 0 }
        ];
        function drawSun() {
            //绘制太阳
            gc.beginPath();
            gc.arc(400, 400, 30, 0, 360);
            gc.closePath();
            grad = gc.createRadialGradient(400, 400, 0, 400, 400, 25);
            grad.addColorStop(0, 'rgb(255,0,0)');
            grad.addColorStop(1, 'rgb(255,153,0)');
            gc.fillStyle = grad;
            gc.fill();
        }
        function drawPlanet(i) {
            var grad = null, pl = planets[i];

            if (pl.start == 0) {
                pl.start = Math.floor(Math.random() * 360);
            }

            //绘制行星轨道
            gc.beginPath();
            gc.arc(400, 400, pl.orbit, 0, 360);
            gc.closePath();
            gc.strokeStyle = 'rgb(100,100,100)';
            gc.stroke();

            //绘制行星
            gc.save();
            gc.translate(400, 400);
            gc.rotate((time * 360 / pl.days + pl.start) * Math.PI / 180);
            gc.beginPath();
            gc.arc(0, -pl.orbit, pl.planet, 0, 360);
            gc.closePath();
            grad = gc.createRadialGradient(0, -pl.orbit, 0, 0, -pl.orbit, pl.planet);
            grad.addColorStop(0, pl.incolor);
            grad.addColorStop(1, pl.outcolor);
            gc.fillStyle = grad;
            gc.fill();

            gc.restore();
        }

        function drawSolar() {
            gc.clearRect(0, 0, 800, 800);
            drawSun();
            for (var i = 0, len = planets.length; i < len; i++) {
                drawPlanet(i);
            }
            time += 0.25;
        }

        setInterval(drawSolar, 25);
    </script>
</body>
</html>

搜索更多相关主题的帖子: 太阳系　 planet　HTML5　style　title　

第 2 楼

得分:0

画太阳和画行星应该可以用一个函数完成吧，都是画一个不同颜色渐变色、不同大小的圆。另轨道半径比例不对，按地球1U标准，依次分别是0.4、0.7、1、1.5、5.2、9.5、19.2、30，当然按这个比例，到木星就画到屏幕外了。

还是转反了，常规都是逆时针转的。

赞一个，汁儿妹妹极大地挑起了大家了解javascript的兴趣哦！

能编个毛线衣吗？

第 3 楼

得分:0

哪天抽空试试。

活到老，学到老！http://www.（该域名已经被ISP盗卖了）E-mail:hu-jj@

第 4 楼

得分:0

我灌灌水，真的不错耶，很漂亮的图案

代码代码，带着的石头码！！！

第 5 楼

得分:0

以下是引用wmf2014在2015-5-29 18:01:22的发言：

画太阳和画行星应该可以用一个函数完成吧，都是画一个不同颜色渐变色、不同大小的圆。另轨道半径比例不对，按地球1U标准，依次分别是0.4、0.7、1、1.5、5.2、9.5、19.2、30，当然按这个比例，到木星就画到屏幕外了。

还是转反了，常规都是逆时针转的。

顺时针还是逆时针无所谓，其实整体反转180°就是逆时针
你说的天文单位实在是个问题，我需要考虑屏幕大小问题
最重要的，画太阳和行星不能一样，太阳永远处于圆心，是不会动的，并且我还要考虑数据源的设计，所以肯定要分开写

[ 本帖最后由冰镇柠檬汁儿于 2015-5-29 22:51 编辑 ]

本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!

第 6 楼

得分:0

回复 6楼冰镇柠檬汁儿

经过分析你的代码，的确可以精简些，不需要单独绘制太阳，另消除了你轨道上的那个奇怪的直线（arc方法输入的仍然是弧度，不是角度，因此你画圆用360是错的），换成逆时针转动代码如下：

程序代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www. <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <canvas width="800" height="800" style="background-color:#000;" id="em"></canvas>
    <script>
        var time = 0, gc = document.getElementById('em').getContext('2d');
        //行星参数，days公转周期，incolor渐变内色，outcolor渐变外色，orbit轨道半径，planet行星半径，start起始位置（弧度）
        var planets = [
            { days: 10000, incolor: 'rgb(255,0,0)', outcolor: 'rgb(255,153,0)', orbit: 0, planet: 30, start: 0 },
            { days: 87.7, incolor: 'rgb(166,150,151)', outcolor: 'rgb(93,62,64)', orbit: 50, planet: 2, start: 0 },
            { days: 224.7, incolor: 'rgb(196,187,172)', outcolor: 'rgb(31,19,21)', orbit: 70, planet: 4, start: 0 },
            { days: 365.24, incolor: 'rgb(120,177,232)', outcolor: 'rgb(5,12,18)', orbit: 90, planet: 5, start: 0 },
            { days: 686.98, incolor: 'rgb(206,201,182)', outcolor: 'rgb(118,66,45)', orbit: 120, planet: 3, start: 0 },
            { days: 4332.59, incolor: 'rgb(192,164,143)', outcolor: 'rgb(50,34,34)', orbit: 175, planet: 15, start: 0 },
            { days: 10759.5, incolor: 'rgb(247,249,227)', outcolor: 'rgb(92,69,51)', orbit: 235, planet: 12, start: 0 },
            { days: 30799.1, incolor: 'rgb(167,225,228)', outcolor: 'rgb(25,36,58)', orbit: 305, planet: 10, start: 0 },
            { days: 60152, incolor: 'rgb(6,97,178)', outcolor: 'rgb(30,59,115)', orbit: 385, planet: 9, start: 0 }
        ];
        function drawPlanet(i)
        {
            var grad = null, pl = planets[i];
            if (pl.start == 0) pl.start = Math.floor(Math.random() * 360);

            //绘制行星轨道
            gc.beginPath();
            gc.arc(400, 400, pl.orbit, 0, 2*3.14);
            gc.closePath();
            gc.strokeStyle = 'rgb(100,100,100)';
            gc.stroke();

            //绘制行星
            gc.save();
            gc.translate(400, 400);
            gc.rotate(-(time * 360 / pl.days + pl.start) * Math.PI / 180);
            gc.beginPath();
            gc.arc(0, -pl.orbit, pl.planet, 0, 360);
            gc.closePath();
            grad = gc.createRadialGradient(0, -pl.orbit, 0, 0, -pl.orbit, pl.planet);
            grad.addColorStop(0, pl.incolor);
            grad.addColorStop(1, pl.outcolor);
            gc.fillStyle = grad;
            gc.fill();
           
            gc.restore();
        }

        function drawSolar()
        {
            gc.clearRect(0, 0, 800, 800);
            for (var i = 0, len = planets.length; i < len; i++) drawPlanet(i);
            time += 0.25;
        }

        setInterval(drawSolar, 25);
    </script>
</body>
</html>

[ 本帖最后由 wmf2014 于 2015-5-30 09:39 编辑 ]

能编个毛线衣吗？

第 7 楼

得分:0

回复 7楼 wmf2014

呃，数学没学好，弧度和角度这个我到现在也还是迷糊中，嘿嘿
你说的太阳能精简的的事情，我始终不觉得应该精简，精简后本来一个填充圆就可以搞定的事情，却需要多执行绘制轨道的代码，虽然从程序角度我的考虑或许多余，但是恒星和行星是不同的，我觉得应该从类型上区分开。
另外还有后续行星的卫星的考量，如果太阳再精简进去，逻辑会有些复杂
https://bbs.bccn.net/thread-445964-1-1.html
帮忙看看，我现在突然觉得这样的一个太阳系系统，如果我把这个系统再继续扩大，那么太阳实际是需要围绕银河系中心旋转，而地球的卫星月球也一样可以有人造卫星，这样反倒通过递归的算法更精简出一个无限细分的系统，你有什么好的想法吗

本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!