Home > Developer > Web Develop
First, what is Two.js?
Two.js is a two-dimensional drawing API for modern Web browsers. Two.js can be used for multiple occasions: Svg,canvas and WebGL, designed to make the creation of flat shapes and animations easier and more concise.
The Two.js has a built-in animation loop that can be paired with other animation libraries. The two.js includes a scalable vector graphics interpreter, which means that developers and designers can create SVG elements in a commercial application, such as Adobe Illustrator, and bring it into the two.js usage scenario.
Second, import Two.js
Third, using Two.js to achieve animation
1) A simple little dome
<script type= "Text/javascript" >//draw the plot area throughout the body varboth =NewBoth ({fullscreen:true,//Set whether full screenAutostarttrue,//whether to start the animation automatically}). AppendTo (Document.body); varStar = Two.makestar (two.width/2,two.height/2,50,125); //two.update ();//Map to pageTwo.bind (' Update ',function(framecount) {star.rotation+=0.03; }) </script>
2) To achieve a more complex
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">svg{Background-color:Black; } </style> <Scriptsrc= "Js/two." Js.js "type= "Text/javascript"CharSet= "Utf-8"></Script> </Head> <Body> <!--Create Div plot Area - <DivID= "Draw-shapes"> </Div> <Scripttype= "Text/javascript"> varElem=document.getElementById ("Draw-shapes"); varparams={width: -, Height: -}; var Both= New(params). AppendTo (Elem); varCircle=Two.makecircle (- the,0, -);//The first two are the x-axis y-axis, and then the radius of the circle varStar=Two.makestar ( the,0, the, *,5);//var ss = Two.makecurve (250,30,46,50,465,48,79,36,94);Circle.fill= "#ccd0d5";//Fill ColorCircle.linewidth= the;//width of EdgeCircle.stroke= "#FED519";//Color of edgesStar.fill= "Yellow"; Star.opacity= 0.5;//Set TransparencyCircle.nostroke ();//Remove Edges varGroup=Two.makegroup (Circle,star);//merge two shapes into one group//Group.fill = "#ffffff";Group.translation.set (Two.width/2,two.height/2); Group.rotation=Math.PI; Group.scale= 0.1; Two.update (); Two.bind ('Update',function(framecount) {if(Group.scale>0.99999){ //Change the scale and rotation to 0 degreesGroup.scale=group.rotation= 0; } varT= (1-Group.scale)* 0.3; Group.scale+=T; Group.rotation+=T*3*Math.PI; }). Play (); </Script> </Body></HTML>
The background is that the function Makecurve will change to what background depends on the number of given is how big and how many
Four, Two.js website link
https://two.js.org/
Two.js to achieve animation effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
