canvas星球轨迹

PROMULGATOR

GentleMan

山东省青岛市

← 刮奖效果，刮刮乐

→ css彩色图片置灰

相关代码

canvas星球轨迹

粒子绕圆轨迹运动

CSS3 星球环绕动画

css3星球椭圆运动

拖动，按轨迹回放

canvas简单的鼠标跟随

svg轨迹动画

Html

Css

Js

 #canvas{display: block;background-color:#000;margin:0 auto;}

var canvas = document.getElementById("canvas");
        var cxt = canvas.getContext('2d');
        var time = 0;
        var EarchRotate = 0;
        var MoonX = 0;
        var MoonY = 0;
        //行星轨道
        function starRoute(){
            for(var i=0; i<=8; i++){
                cxt.save();
                cxt.translate(500,500);
                cxt.strokeStyle = '#fff';
                cxt.beginPath();
                cxt.arc(0,0,i*55,0,2*Math.PI,false);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            }
        }
        //创建Start类型(其实在js中是对象)
        function Star(name,x,y,r,startColor,endColor,revolution){
            this.name = name;          //星球名称
            this.x = x;                //圆心  x,y
            this.y = y;
            this.r = r;                //半径  r
            this.startColor = startColor;        //渐变 start,end
            this.endColor = endColor;
            this.revolution = revolution;//公转周期 revolution
        }
        Star.prototype = {
            constructor : Star,
            drawStar : function(){
                cxt.save();
                cxt.translate(500,500);
                //绘制渐变颜色
                var gradient = cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
                gradient.addColorStop(0,this.startColor);
                gradient.addColorStop(1,this.endColor);
                cxt.fillStyle = gradient;
                cxt.beginPath();
                if(this.name == '地球'){
                    //存储转动的角度,找到moon的旋转坐标
                    EarchRotate = time*360/this.revolution*Math.PI/180;
                    MoonX = 165*Math.sin(EarchRotate);
                    MoonY = -165*Math.cos(EarchRotate);
                    cxt.rotate(time*360/this.revolution*Math.PI/180);
                    cxt.arc(this.x,this.y,this.r,0,2*Math.PI,false);
                    cxt.fill();
                }else if(this.name == '月球'){
                    cxt.save();
                    cxt.translate(MoonX,MoonY); //重置原点，即设置月球旋转中心
                    //月球旋转轨迹
                    cxt.beginPath();
                    cxt.strokeStyle = 'rgba(207,207,207,0.2)';
                    cxt.arc(0,0,30,0,2*Math.PI,false);
                    cxt.stroke();
                    cxt.closePath();
                    //月球圆心坐标
                    var x = 30*Math.cos((time*360/this.revolution-90)*Math.PI/180);
                    var y = 30*Math.sin((time*360/this.revolution-90)*Math.PI/180);
                    cxt.rotate(time*360/this.revolution*Math.PI/180);
                    //月球的渐变颜色
                    var gradientM = cxt.createRadialGradient(x,y,0,x,y,this.r);
                    gradientM.addColorStop(0,this.startColor);
                    gradientM.addColorStop(1,this.endColor);
                    cxt.fillStyle = gradientM;
                    //绘制月球
                    cxt.beginPath();
                    cxt.arc(x,y,this.r,0,2*Math.PI,false);
                    cxt.closePath();
                    cxt.fill();
                    cxt.restore();
                }else{
                    cxt.rotate(time*360/this.revolution*Math.PI/180);
                    cxt.arc(this.x,this.y,this.r,0,2*Math.PI,false);
                    cxt.fill();
                }
                cxt.closePath();
                cxt.restore();
                //加上字体
                cxt.save();
                cxt.translate(500,500);
                cxt.fillStyle = '#fff';
                cxt.font = "bold " + 0.9*this.r + "px Arial";
                cxt.textAlign = "center";
                cxt.textBaseline = "middle";
                // cxt.rotate(time*360/this.revolution*Math.PI/180)
                if(this.name=='太阳'){
                    cxt.fillText(this.name,this.x,this.y);
                }else if(this.name=='月球'){
                    cxt.fillText('',this.x,this.y); //月球太小，字体不显示
                }else{
                    cxt.fillText(this.name,this.x+50,this.y);
                }
                cxt.restore();
            }
        }
        function moveStar(){
            cxt.clearRect(0,0,1000,1000);   //首先清除画布
            starRoute();
            var Sun = new Star('太阳',0,0,25,'#ffff00','#ff9900',0);
            var Mercury = new Star('水星',0,-55,8,'#a69697','#5c3e40',87.70);   //水星
            var Venus = new Star('金星',0,-110,13,'#c4bbac','#1f1315',224.701);  //金星
            var Earth = new Star('地球',0,-165,18,'#78b1e8','#050c12',365.2422); //地球
            var Moon = new Star('月球',0,-195,6,'#a69697','#5c3e40',27.32); //月球
            var Mars = new Star('火星',0,-220,10,'#cec9b6','#76422d',686.98); //火星
            var Jupier = new Star('木星',0,-275,25,'#c0a48e','#322222',4332.589); //木星
            var Saturn = new Star('土星',0,-330,23,'#f7f9e3','#5c4533',10759.5); //土星
            var Uranus = new Star('天王星',0,-385,20,'#a7e1e5','#19243a',30799.095); //天王星
            var Neptune = new Star('海王星',0,-440,20,'#0661b2','#1e3b73',60152); //海王星
            Sun.drawStar();
            Mercury.drawStar();
            Venus.drawStar();
            Earth.drawStar();
            Moon.drawStar();
            Mars.drawStar();
            Jupier.drawStar();
            Saturn.drawStar();
            Uranus.drawStar();
            Neptune.drawStar();
            time++;
        }
setInterval(moveStar,100)

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas星球轨迹



代码描述：canvas写的八大行星运动，面向对象写法

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas星球轨迹-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号