基于canvas的简易太阳系模型
最近闲下来,开始了HTML5的入门之旅。跟着某视频(避免广告嫌疑)做了两个简单的canvas例子。此处为简易太阳系模型实例。
PS: 例子为实验性例子,欢迎批判~~~~
一、实现逻辑
1、画出轨道,一共8个轨道(冥王星不算)
2、画出星体,含太阳共9个星体
3、循环调用1、2步,使星体动起来。
二、代码展示
1、效果图
2、全部代码如下
a. 简单模式
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> Canvas-太阳系 </title> </head> <body> <canvas width="800" height="800" id="sunClass" style="background:black">您的浏览器不支持<code>canvas</code>标签!</canvas> <script> //获取画布DOM var dCanvas = document.getElementById('sunClass'); //设置绘图环境.注意只能用小写“2d” var paper = dCanvas.getContext('2d'); var BX=400,BY=400; var panletDef = 40; var colorArr = [["#f00","#f90"],["#A69697","#5C3E40"],["#C4BBAC","#1F1315"],["#78B1E8","#050C12"],["#CEC9B6","#76422D"],["#C0A48E","#322222"],["#F7F9E3","#5C4533"],["#A7E1E5","#19243A"],["#0661B2","#1E3B73"]]; var timeUnit = 20;//时间基本数,毫秒 用于表示天 var timer = 0;//计数器,表示循环了多少个时间单位timeUnit var scrollArr = [0,87.7,224.701,365.2422,686.98,4332.589,10759.5,30799.095,164.8*365];//太阳系各行星的公转系数。 单位为天 //画图 drawSunClass(); //启动定时器 window.setInterval(drawSunClass,timeUnit); /** * 绘制太阳系 * **/ function drawSunClass(){ paper.clearRect(0,0,900,900); for(var i = 0; i<9; i++){ //1. 画轨道 drawTrack(paper,i); //2. 画星体 drawCircleBall(paper,i,timer); } timer++;//计数器+1 }; /** * 画轨道 *@param _paper HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取 *@param order 次序,表示太阳系的行星序号。从太阳本身开始,越远序号越大。 * **/ function drawTrack(_paper,order){ if(typeof order == 'undefined') order = 0; if(order > 0){ _paper.beginPath(); _paper.strokeStyle="#fff"; _paper.arc(BX,BY,panletDef*(order),0,360,false); _paper.stroke(); _paper.closePath(); } } /** * 画星体 *@param _paper HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取 *@param order 次序,表示太阳系的行星序号。从太阳本身开始,越远序号越大。 *@param time 计数器,表示当前已过多少时间单位。 * **/ function drawCircleBall(_paper,order,time){ if(typeof order == 'undefined') order = 0; if(typeof time == 'undefined') time = 0; var cirY = panletDef*order; _paper.save(); _paper.translate(BX,BY);//重新设置(0,0)点的位置 if(order != 0){ _paper.rotate(time*2*Math.PI/scrollArr[order]); } _paper.beginPath(); _paper.arc(0,cirY,10,0,360,false); //获取径向渐变对象 var fillColor = _paper.createRadialGradient(0,cirY,0,0,cirY,10); fillColor.addColorStop(0,colorArr[order][0]);//指定渐变颜色 fillColor.addColorStop(1,colorArr[order][1]);//指定渐变颜色 _paper.fillStyle=fillColor; _paper.fill(); _paper.closePath(); _paper.restore(); } </script> </body> </html>
b. 对象模式
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> Canvas-太阳系--js对象模式 </title> </head> <body> <canvas width="800" height="800" id="sunClass" style="background:black">您的浏览器不支持<code>canvas</code>标签!</canvas> <script> //获取画布DOM var dCanvas = document.getElementById('sunClass'); //设置绘图环境.注意只能用小写“2d” var paper = dCanvas.getContext('2d'); var BX=400,BY=400;//定义中心圆点位置 var panletDef = 40;//定义行星之间的距离 var timeUnit = 20;//时间基本数,毫秒 用于表示天 /** * 画轨道 *@param _paper HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取 *@param order 次序,表示太阳系的行星序号。从太阳本身开始,越远序号越大。 * **/ function drawTrack(_paper,order){ if(typeof order == 'undefined') order = 0; if(order > 0){ _paper.beginPath(); _paper.strokeStyle="#fff"; _paper.arc(BX,BY,panletDef*(order),0,360,false); _paper.stroke(); _paper.closePath(); } } /** * 创建星体类 * **/ function Star(x,y,r,times,color){ this.x = x; this.y = y; this.r = r; this.color = color; this.timer = 0; this.times = times; this.draw = function (_paper){ _paper.save(); _paper.translate(BX,BY);//重新设置(0,0)点的位置 _paper.rotate(this.timer*2*Math.PI/times); _paper.beginPath(); _paper.arc(this.x,this.y,this.r,0,360,false); //获取径向渐变对象 this.fillColor = _paper.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r); this.fillColor.addColorStop(0,this.color[0]);//指定渐变颜色 this.fillColor.addColorStop(1,this.color[1]);//指定渐变颜色 _paper.fillStyle=this.fillColor; _paper.fill(); _paper.closePath(); _paper.restore(); this.timer++; } } /** * 创建太阳构造函数 * **/ var Sun = function (){ Star.call(this,0,0,10,0,["#f00","#f90"]); } /** * 创建水星构造函数 * **/ var Mercury = function (){ Star.call(this,0,-40,10,87.7,["#A69697","#5C3E40"]); } /** * 创建金星构造函数 * **/ var Venus = function (){ Star.call(this,0,-80,10,224.701,["#C4BBAC","#1F1315"]); } /** * 创建地球构造函数 * **/ var Earth = function (){ Star.call(this,0,-120,10,365.2422,["#78B1E8","#050C12"]); } /** * 创建火星构造函数 * **/ var Mars = function (){ Star.call(this,0,-160,10,686.98,["#CEC9B6","#76422D"]); } /** * 创建木星构造函数 * **/ var Jupiter = function (){ Star.call(this,0,-200,10,4332.589,["#C0A48E","#322222"]); } /** * 创建土星构造函数 * **/ var Saturn = function (){ Star.call(this,0,-240,10,10759.5,["#F7F9E3","#5C4533"]); } /** * 创建天王星构造函数 * **/ var Uranus = function (){ Star.call(this,0,-280,10,30799.095,["#A7E1E5","#19243A"]); } /** * 创建海王星构造函数 * **/ var Neptune = function (){ Star.call(this,0,-320,10,60152,["#0661B2","#1E3B73"]); } //初始化各行星对象 var sun = new Sun(); var mercury = new Mercury(); var venus = new Venus(); var earth = new Earth(); var mars = new Mars(); var jupiter = new Jupiter(); var saturn = new Saturn(); var uranus = new Uranus(); var neptune = new Neptune(); /** * 绘制太阳系 * **/ function drawSunClass(){ //清空画布 paper.clearRect(0,0,900,900); for(var i = 0; i<9; i++){ //1. 画轨道 drawTrack(paper,i); } //2. 画星体 sun.draw(paper); mercury.draw(paper); venus.draw(paper); earth.draw(paper); mars.draw(paper); jupiter.draw(paper); saturn.draw(paper); uranus.draw(paper); neptune.draw(paper); }; //第一次绘制星图 drawSunClass(); //启动定时器,循环绘制星图 window.setInterval(drawSunClass,timeUnit); </script> </body> </html>
三、后记
1、代码在FireFox 32.0.3上测试有效。
相关推荐
liulinsp 2020-01-09
淡风wisdon大大 2019-07-01
努力的zhiyi 2014-12-10
makeWorks 2019-06-20
snmplink 2017-12-15
无人机wikipedia 2018-05-18
xxmzumeng 2014-11-25
中国科普博览 2018-01-31
我在国博讲故事 2018-01-30
心理学哲学批判性思维 2018-01-20
心理学哲学批判性思维 2018-01-20
心理学哲学批判性思维 2018-01-19
无人机日常 2018-01-19
如何认真地活着 2018-01-17
春哥聊天 2018-01-17
天文八卦学 2018-01-16
天文八卦学 2018-01-16
黑白漫文化 2018-01-15