HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> <!--简单 样式模版--> <style type="text/css"> * { margin: 0; padding: 0; font-family: YaHei Consolas Hybrid,宋体; font-size: 14px; list-style: none; } .wrapper { margin: 50px auto; width: 1000px; padding: 10px; border: solid 1px gray; background-color: #eee; overflow:auto; }/*H1浅蓝阴刻字*/ body { background-color: gray; } h1 { text-align: center; display: block; background-color: #C4DEF7; color: #344251; font: normal 30px "微软雅黑"; text-shadow: 1px 1px 0px #DEF3FF; padding: 5px 0px; margin:10px; box-shadow: 0px 2px 6px #000; border-radius:10px; } #canvas { background-color:Black;} </style> </head> <body> <h1> HTML5 之 Canvas Demo SolarSystem </h1> <div class="wrapper"> <canvas width="1000" height="1000" id="canvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //初始化画面，并保存当前环境 var initMap= function(){ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.save(); ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2); } //画轨道 var drawTrack = function () { for (var i = 0; i <= 8; i++) { ctx.beginPath(); ctx.arc(0, 0, 60 * i, 0, 360, false); ctx.closePath(); ctx.strokeStyle = "#fff"; ctx.stroke(); } } //画星球的函数（圆心坐标，开始渐变色，结束渐变色，公转周期,开始天数） var drawPlanets = function (x, y, radius, sColor, eColor, cycle) { this.x = x; this.y = y; this.radius = radius; this.sColor = sColor; this.eColor = eColor; this.cycle = cycle; this.days = 0; this.Draw = function () { var angle = this.days * (360 / cycle); ctx.save(); ctx.rotate(angle * Math.PI / 180); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 360, false); ctx.closePath(); var planetStyle = ctx.createRadialGradient(this.x - 2, this.y, 0, this.x, this.y, this.radius); planetStyle.addColorStop(0, this.sColor); planetStyle.addColorStop(1, this.eColor); ctx.fillStyle = planetStyle; ctx.fill(); ctx.restore(); this.days++; } } //画太阳的类，继承drawPlanets function Sun() { drawPlanets.call(this, 0, 0, 20, "#F00", "#f90", 0); } //创建一个水星的对象构造方法 function Mercury() { drawPlanets.call(this, 60, 0, 12, "#A69697", "#5C3E40", 87.70); } //创建一个金星的对象构造方法 function Venus() { drawPlanets.call(this, 120, 0, 14, "#C4BBAC", "#1F1315", 224.701); } //创建一个地球的对象构造方法 function Earth() { drawPlanets.call(this, 180, 0, 15, "#0FAFFC", "#005281", 365); } //创建一个火星的对象构造方法 function Mars() { drawPlanets.call(this, 240, 0, 15, "#CEC9B6", "#76422D", 686.98); } //创建一个木星的对象构造方法 function Jupiter() { drawPlanets.call(this,300, 0, 15, "#C0A48E", "#322222", 4332.589); } //创建一个土星的对象构造方法 function Saturn() { drawPlanets.call(this,360, 0, 15, "#F7F9E3", "#5C4533", 10759.5); } //创建一个天王星的对象构造方法 function Uranus() { drawPlanets.call(this,420, 0, 15, "#A7E1E5", "#19243A", 30799.095); } //创建一个海王星的对象构造方法 function Neptune() { drawPlanets.call(this,480, 0, 15, "#0661B2", "#1E3B73", 60152); } //实例化出星球的对象 var sun = new Sun(); var earth = new Earth(); var mercury = new Mercury(); var venus = new Venus(); var mars = new Mars(); var jupiter = new Jupiter(); var saturn = new Saturn(); var uranus = new Uranus(); var neptune = new Neptune(); var move = function () { //初始化画布，并保存环境 initMap(); //绘制轨道 drawTrack(); //调用绘制星球的函数 sun.Draw(); earth.Draw(); venus.Draw(); mars.Draw(); jupiter.Draw(); saturn.Draw(); uranus.Draw(); mercury.Draw(); neptune.Draw(); //返回到开始保存的环境 ctx.restore(); } move(); //启动定时器，开始绘制 window.setInterval(move, 80); </script> </div> </body> </html>
效果图：
