简单模仿太阳系旋转图（SVG）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单模仿太阳系旋转图（SVG）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title></title> <script src="js/two.js"></script> <style> body{ text-align: left; } svg{ background: #000; } </style> </head> <body> <div id="box"></div> <script> var options={ width:500, height:500, type:Two.Types.svg } var two=new Two(options).appendTo(box); var c1=two.makeCircle(0,0,180); var c2=two.makeCircle(0,0,80); var c3=two.makeCircle(0,180,50); var c4=two.makeCircle(0,180,30); var c5=two.makeCircle(0,-50,8); c1.fill=‘none‘; c1.stroke=‘#fff‘; c2.fill=‘#f00‘; c3.fill=‘none‘; c3.stroke=‘#fff‘; c4.fill=‘#00f‘; c5.fill=‘#ff0‘; c5.rotation=0; var groupm=two.makeGroup(c5); // groupm.translation.set(200,0); var groupe=two.makeGroup(c3,c4,groupm); //group.rotation=-45*Math.PI/180; var groups=two.makeGroup(c1,c2,groupe); groups.translation.set(two.width/2,two.height/2); groupm.translation.set(0,180); two.update(); //var deg=0; two.bind(‘update‘, function(){ groupm.rotation += 0.5*Math.PI/180; groupm.rotation %= 4*Math.PI; groupe.rotation += 2*Math.PI/180; groupe.rotation %= 2*Math.PI; }) two.play(); </script> </body> </html>
截图如下：
以上是关于简单模仿太阳系旋转图（SVG）的主要内容，如果未能解决你的问题，请参考以下文章