当前位置:首页 > 网页特效 > 其他特效 >

html5实现的旋转的太阳系动画

时间:2014-03-21 08:39 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • HTML5 Canvas CSS3模拟实现旋转的太阳系动画,相当牛叉我觉得,以前有一个是CSS3写的,各这个差不多,有兴趣在本站网页特效栏目搜索“CSS3太阳系星球效果图”,各个星球围着太阳旋转,速度不一样,有运动轨迹线,学习Canvas动画的好范例。
  • <!doctype html>
    <html>
    <head>
    <title>html5旋转的太阳系动画</title>
    <meta charset="utf-8">
    </head>
    <body>
    <canvas id="canvas" width="1000" height="1000" style="background:#000"> </canvas>
    <script>
    var cxt=document.getElementById('canvas').getContext('2d')
    function draw(){
    for(var i=0;i<8;i++){
    cxt.beginPath();
    cxt.strokeStyle="gray";
    cxt.closePath();
    cxt.arc(500,500,(i+1)*50,0,360,false);
    cxt.closePath();
    cxt.stroke();
    }
    }
    draw();
    function Star(x,y,radius,cycle,scolor,ecolor){
    this.x=x;
    this.y=y;
    this.radius=radius;
    this.cycle=cycle;
    this.scolor=scolor;
    this.ecolor=ecolor;
    this.color=null;
    this.time=0;
    this.draw=function(){
    cxt.save();
    cxt.translate(500,500);
    cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
    cxt.beginPath();
    cxt.arc(this.x,this.y,this.radius,0,360,false);
    cxt.closePath();
    this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
    this.color.addColorStop(0,this.scolor);
    this.color.addColorStop(1,this.ecolor);
    cxt.fillStyle=this.color;
    cxt.fill();
    cxt.restore();
    this.time+=1;
    }
    }
    function Sun(){
    Star.call(this,0,0,20,0,"#ff0000","#ff9900");
    }
    var sun=new Sun();
    function di(){
    Star.call(this,0,-50,10,87,"#A69697","#5C3E40");
    }
    var di=new di();
     
    function water(){
    Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
    }
    var water=new water();
    function jin(){
    Star.call(this,0,-150,10,365.2422,"#78B1E8","#050C12");
    }
    var jin=new jin();
     
    function huo(){
    Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
    }
    var huo=new huo();
    function mu(){
    Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
    }
    var mu=new mu();
    function tu(){
    Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
    }
    var tu=new tu();
    function hai(){
    Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
    }
    var hai=new hai();
    function ming(){
    Star.call(this,0,-400,10,164.8*365,"#0661B2","#1E3B73");
    }
    var ming=new ming();
    function move(){
    cxt.clearRect(0,0,1000,1000)
    draw();
    ming.draw();
    sun.draw();
    di.draw();
    water.draw();
    jin.draw();
    huo.draw();
    mu.draw();
    tu.draw();
    hai.draw();
    }
    setInterval(move,10);
    </script>
    </body>
    </html>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-qitatexiao/7013.html

其他特效下载排行

最新文章