网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

标题	html5使用canvas绘制太阳系效果
范文	星球 变量名 公转周期 光色 暗色     水星 Mercury 87.70 #a69697 #5c3e40     金星 Venus 224.701.70 #c4bbac #1f1315     地球 Earth 365.2422 #78b1e8 #050c12     火星 Mars 686.98 #cec9b6 #76422d     木星 Jupiter 4332.589 #c0a48e #322     土星 Saturn 10759.95 #f7f9e3 #5c4553     天王星 Uranus 30799.095 #a7e115 #19243a     海王星 Neptune 60152.95 #0661b2 #1E3b73     <canvas id="canvas" width="1000" height="1000"></canvas>     代码如下:     var canvas=document.getElementById("canvas");     var cxt=canvas.getContext("2d");     function DrawTrack(){     for(var i=0;i<8;i++){     cxt.beginPath();     cxt.arc(500,500,(i+1)*50,0,360,false);     cxt.closePath();     cxt.strokeStyle="#fff";     cxt.stroke();     }     }     function DrawStart(x,y,radius,cycle,sColor,eColor){     //画出星球需要哪些属性     //星球的坐标点     this.x=x;     this.y=y;     //星球的半径     this.radius=radius;     //星球的颜色(开始色,结束色)     this.sColor=sColor;     this.eColor=eColor;     //创建一个渐变色空对象     this.color=null;     this.time=0;     //公共周期     this.cycle=cycle;     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;     }     }</p> <p> function Sun(){//太阳1     DrawStart.call(this,0,0,20,0,"#f00","#f90");     }     function Mercury(){//水星2     DrawStart.call(this,0,-50,10,87.70,"#A69697","#5c3e40");     }     function Venus(){//金星3     DrawStart.call(this,0,-100,10,224.71,"#c4bbac","#1f1315");     }     function Earth(){//地球4     DrawStart.call(this,0,-150,10,365.224,"#78b1e8","#050c12");     }     function Mars(){//火星5     DrawStart.call(this,0,-200,10,686.98,"#cec9b6","#76422d");     }     function Jupiter(){//木星6     DrawStart.call(this,0,-250,10,4332.589,"#c0a48e","#322");     }     function Saturn(){//土星7     DrawStart.call(this,0,-300,10,10759.5,"#f7f9e3","#5c4533");     }     function Uranus(){//天王星8     DrawStart.call(this,0,-350,10,30799.95,"#a7e1e5","#19243a");     }     function Neptune(){//天王星9     DrawStart.call(this,0,-400,10,60152.95,"#0661b2","#1E3b73");     }     var s=new Sun();//1     var m=new Mercury();//2     var v=new Venus();//3     var e=new Earth();//4     var ma=new Mars();//5     var j=new Jupiter();//6     var sa=new Saturn();//7     var ur=new Uranus();//8     var ne=new Neptune();//9     setInterval(function(){     cxt.clearRect(0,0,1000,1000);     DrawTrack();     s.draw();     m.draw();     v.draw();     e.draw();     ma.draw();     j.draw();     sa.draw();     ur.draw();     ne.draw();     },10);
随便看	高一新生自我介绍简单5篇 高一新生简单自我介绍最新5篇 大一新生自我介绍500字5篇 竞选学生会组织部自我介绍5篇 初中新生自我介绍怎么写 新生开学自我介绍范文十篇 大一新生自我介绍简单范文 新生入学自我介绍简短最新【5篇】 大一新生自我介绍3分钟5篇 大一新生入学自我介绍范文最新【5篇】 大一新生自我介绍10篇 高一新生简单自我介绍5篇 大一新生自我介绍范文5篇 高一新生幽默吸引人的自我介绍5篇 大一新生1分钟精彩自我介绍5篇 大一新生吸引人的30秒自我介绍5篇 大一新生女生自我介绍5篇 大一新生口述自我介绍一分钟5篇 高一新生自我介绍简短范文5篇 高中竞选学生会自我介绍10篇 学生会面试自我介绍一分钟5篇最新 竞选主席团自我介绍模板5篇_竞选主席团的自我介绍两分钟 2021简单大方面试自我介绍范文10篇 大学助班如何自我介绍 简单有趣的自我介绍怎么写 squat thrust squat-thrust squatting squatting position squattocracy squatty squaw squawk squawked squawking 微 微不足道 微乎其微 微冻 微分几何 微分学 微利 微力 微型 微型小说 消夏晚会串词 双拥活动游戏串词 联谊晚会串词 迎新晚会节目串词 践行社会主义核心价值观演讲串词 县老干部运动会开幕式讲话稿 读书节活动开幕式上的发言 2016年律师事务所开业致辞 舞在“孩子的盛宴”主持人串场词 在书法展开幕式上的致谢词

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。