首页 > 代码库 > [ html canvas ] canvas绘制太阳系实例代码
[ html canvas ] canvas绘制太阳系实例代码
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=http://www.mamicode.com/‘./css/index.css‘ />"color: #008080;"> 9 <script type=‘text/javascript‘ src=http://www.mamicode.com/‘./js/jquery-1.12.1.min.js‘></script>"color: #008080;"> 10 <style type=‘text/css‘> 11 html,body,canvas { 12 margin: 0; padding: 0; 13 } 14 15 html { 16 height: 100% 17 } 18 19 body { 20 background: #000; 21 } 22 23 #can { 24 background: #000; display: block; margin: 0 auto; border-radius: 2px; 25 } 26 </style> 27 <script type=‘text/javascript‘> 28 $( function(){ 29 var can = $( ‘#can‘ ).get( 0 ); 30 var oCan = can.getContext( ‘2d‘ ); 31 var w = can.width; 32 var h = can.height; 33 oCan.translate( w / 2 , h / 2 ); 34 function DrawTrack(){ 35 this.draw = function(){ 36 oCan.save(); 37 for( var i = 0 ; i < 8 ; i++ ){ 38 oCan.beginPath(); 39 oCan.strokeStyle = ‘#FFF‘; 40 oCan.lineWidth = 1; 41 oCan.arc( 0 , 0 , ( i + 1 ) * 50 , 0 * Math.PI / 180 , 360 * Math.PI / 180 , 42 false ); 43 oCan.stroke(); 44 oCan.closePath(); 45 } 46 oCan.restore; 47 } 48 } 49 function DrawStar( parm ){ 50 parm = parm || {}; 51 this.x = parm.x; 52 this.y = parm.y; 53 this.circle = parm.circle; 54 this.time = parm.time; 55 this.sColor = parm.sColor; 56 this.eColor = parm.eColor; 57 this.crg = null; 58 this.date = 0; 59 this.draw = function(){ 60 oCan.save(); /* 保存画布信息异常重要,非常重要 */ 61 oCan.beginPath(); 62 oCan.rotate( this.date * ( 360 / this.time ) * Math.PI / 180 ); 63 this.crg = oCan.createRadialGradient( this.x , this.y , 2 , this.x , this.y , 64 this.circle ); 65 this.crg.addColorStop( .5 , this.sColor ); 66 this.crg.addColorStop( 1 , this.eColor ); 67 oCan.fillStyle = this.crg; 68 oCan.arc( this.x , this.y , this.circle , 0 , 2 * Math.PI , false ); 69 oCan.fill(); 70 oCan.closePath(); 71 oCan.restore(); 72 this.date++; 73 }; 74 } 75 var track = new DrawTrack(); 76 var sun = new DrawStar( { 77 ‘x‘ : 0 , 78 ‘y‘ : 0 , 79 ‘circle‘ : 30 , 80 ‘time‘ : 0 , /* 公转周期 */ 81 ‘sColor‘ : ‘#F00‘ , 82 ‘eColor‘ : ‘#FF0‘ , 83 } ); 84 var mercury = new DrawStar( { 85 ‘x‘ : 0 , 86 ‘y‘ : -50 , 87 ‘circle‘ : 10 , 88 ‘time‘ : 87 , 89 ‘sColor‘ : ‘#9C9‘ , 90 ‘eColor‘ : ‘#F66‘ , 91 } ); 92 var venus = new DrawStar( { 93 ‘x‘ : 0 , 94 ‘y‘ : -100 , 95 ‘circle‘ : 20 , 96 ‘time‘ : 225 , 97 ‘sColor‘ : ‘#9C3‘ , 98 ‘eColor‘ : ‘#936‘ , 99 } );100 var earth = new DrawStar( {101 ‘x‘ : 0 ,102 ‘y‘ : -150 ,103 ‘circle‘ : 20 ,104 ‘time‘ : 365 ,105 ‘sColor‘ : ‘#F93‘ ,106 ‘eColor‘ : ‘#CCC‘ ,107 } );108 var mars = new DrawStar( {109 ‘x‘ : 0 ,110 ‘y‘ : -200 ,111 ‘circle‘ : 10 ,112 ‘time‘ : 687 ,113 ‘sColor‘ : ‘#963‘ ,114 ‘eColor‘ : ‘#C30‘ ,115 } );116 var jupiter = new DrawStar( {117 ‘x‘ : 0 ,118 ‘y‘ : -250 ,119 ‘circle‘ : 20 ,120 ‘time‘ : 4333 ,121 ‘sColor‘ : ‘#09C‘ ,122 ‘eColor‘ : ‘#0F0‘ ,123 } );124 var saturn = new DrawStar( {125 ‘x‘ : 0 ,126 ‘y‘ : -300 ,127 ‘circle‘ : 30 ,128 ‘time‘ : 10760 ,129 ‘sColor‘ : ‘#609‘ ,130 ‘eColor‘ : ‘#666‘ ,131 } );132 var uranus = new DrawStar( {133 ‘x‘ : 0 ,134 ‘y‘ : -350 ,135 ‘circle‘ : 20 ,136 ‘time‘ : 30800 ,137 ‘sColor‘ : ‘#F30‘ ,138 ‘eColor‘ : ‘#060‘ ,139 } );140 var neptune = new DrawStar( {141 ‘x‘ : 0 ,142 ‘y‘ : -400 ,143 ‘circle‘ : 10 ,144 ‘time‘ : 60152 ,145 ‘sColor‘ : ‘#F00‘ ,146 ‘eColor‘ : ‘#FF0‘ ,147 } );148 function drawStar(){149 oCan.clearRect( -w / 2 , -h / 2 , w , h );150 track.draw();151 sun.draw();152 mercury.draw();153 venus.draw();154 earth.draw();155 mars.draw();156 jupiter.draw();157 saturn.draw();158 uranus.draw();159 neptune.draw();160 }161 drawStar();162 setInterval( drawStar , 50 );163 } );164 </script>165 </head>166 <body>167 <canvas id=‘can‘ width=‘850‘ height=‘850‘>检测到您的浏览器版本过低请升级您的浏览器版本,以获取更好的使用体验...</canvas>168 </body>169 </html>
[ html canvas ] canvas绘制太阳系实例代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。