未加星标

Canvas 绘制八大行星

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
<canvaswidth="1000"height="1000"id="canvas"style="background:#000;"> 您的浏览器不支持,请升级浏览器! </canvas>

//设置2d绘图环境 var ctx = document.getElementById("canvas").getContext("2d"); //轨道 functiondrawTrack(){ for(var i = 0;i < 8;i++){ ctx.beginPath(); ctx.arc(500,500,(i+1) * 50,0,360,false); ctx.strokeStyle = "#fff";//设置笔触颜色 ctx.stroke(); ctx.closePath(); } } //星球 functionStar(x,y,radius,cycle,sColor,eColor){ //画出星球需要的属性 //星球的坐标点 星球的半径 星球的颜色(开始颜色、结束颜色) //公转周期 //星球坐标点 this.x = x; this.y = y; this.radius = radius; this.cycle = cycle; this.eColor = eColor; this.sColor = sColor; this.color = null;//渐变颜色空对象 this.time = 0;//设置一个计时器 this.draw = function(){ //save()可以这样理解 原来的画布内容不变 把save()和restore()之间的内容画好了 在塞进来 ctx.save();//保存之前的画布内容 ctx.translate(500,500);//重置0,0坐标点 ctx.rotate(this.time * (360/this.cycle) * Math.PI / 180);//设置旋转角度 //画星球 ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,360,false); ctx.closePath(); //设置星球的填充颜色 this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); this.color.addColorStop(0,this.sColor);//渐变颜色开始点 this.color.addColorStop(0,this.eColor);//渐变颜色结束点 ctx.fillStyle = this.color; ctx.fill();//执行填充命令 //填充星球 ctx.restore();//恢复之前保存的画布内容 this.time +=1; } } //创建一个太阳对象的构造函数 functionSun(){ Star.call(this,0,0,20,0,"#F00","#f90"); } //创建一个水星的对象构造方法 functionMercury(){ Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40"); } //创建一个金星的对象构造方法 functionVenus(){ Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315"); } //创建一个地球的对象构造方法 functionEarth(){ Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12"); } //创建一个火星的对象构造方法 functionMars(){ Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D"); } //创建一个木星的对象构造方法 functionJupiter(){ Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222"); } //创建一个土星的对象构造方法 functionSaturn(){ Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533"); } //创建一个天王星的对象构造方法 functionUranus(){ Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A"); } //创建一个海王星的对象构造方法 functionNeptune(){ Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73"); } //创建太阳对象实例 var sun=new Sun(); //创建水星对象实例 var water=new Mercury(); //创建金星对象实例 var gold=new Venus(); //创建一个地球对象实例 var diqiu=new Earth(); //创建一个火星对象实例 var fire=new Mars(); //创建一个木星对象实例 var wood=new Jupiter(); //创建一个土星对象实例 var soil=new Saturn(); //创建一个天王星对象实例 var god=new Uranus(); //创建一个海王星对象实例 var sea=new Neptune(); functionmove(){ //清除画布 ctx.clearRect(0,0,1000,1000); //画出轨道 drawTrack(); //画出每个星球 sun.draw(); water.draw(); gold.draw(); diqiu.draw(); fire.draw(); wood.draw(); soil.draw(); god.draw(); sea.draw(); } //使让星球进行运动 setInterval(move,10);

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 360浏览器王星
分页:12
转载请注明
本文标题:Canvas 绘制八大行星
本站链接:http://www.codesec.net/view/520553.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(20)