H5js Two-dimensional animation production! Basic operation of Two.js Class1

Today introduced a network is not commonly used plug-in two.js, just beginning to learn the process, found that there is no appropriate tutorial on the Web, here to publish basic operations

Two.js is a Web page two-dimensional drawing software that can produce a variety of animation effects in a given area.

The download URL is as follows: https://two.js.org/#download

Class1:

One: How to use:

First introduce the JS file in the page:

    <script src="js/two.js" type="text/javascript" charset= " Utf-8 "></script>

Open Web Console console, enter two, if an array is returned, the proof is valid,

Create a Div, as a selection

<div id="draw-shapes"></div>        <style type="text/css  ">                        #draw-shapes{                border:1px  solid blue;                width:400px;                height:300px;                Background-color:green;            }                 </style>    

Select the top div in JS

var elem = document.getElementById ('draw-shapes'); // Select the div on the page

Two: Create a shape in space and space:

After doing this, create a two-dimensional space operation

var params  -  ; // Two dimensional space width (overflow hidden)

var New (params). AppendTo (Elem); // Create a new two-dimensional space in a div

To create a graph:

var circle = two.makecircle (); // Create a circle (x coordinate, y coordinate, radius) var rect = two.makerectangle (213); // Create Rectangle (x, Y, W, h)

Three: Adjust the graphic properties:

//to set different properties specificallyCircle.fill ='#FF8000';//Fill ColorCircle.stroke ='Red';//Edge ColorCircle.linewidth =5;//Edge WidthCircle.opacity =0.5;//TransparencyRect.fill='Blue'; Rect.opacity=0.75; Rect.stroke=" White"; Rect.linewidth=5;
Rect.nostroke ();//Remove edges

Four: Project on the Web page:

To project the generated space and graphics onto the Web page, you need to enter the following instructions:

Two.update ();

Effects in a Web page

Five: The role and establishment of the group:

Groups can combine several shapes into a group, and a group can set the same properties and effects

After you create the drawing, you can execute the following code:

var group = Two.makegroup (circle, rect);

Put two shapes in a group

// properties can be set for all shapes within a group        Group.translation. Set 2 2); // let all the shapes in a group be shifted so that the center remains in the two-        dimensional space where Group.rotation = Math.PI; // Rotate        0.75; // Zoom                  7; // Set line width uniformly

Do the same for all the shapes in the group with the instructions above

The effect of the two shapes after the operation.

So much for today, and next time we'll show you how to create an animated effect.

Learned the small partners remember to praise Oh!

H5js Two-dimensional animation production! Basic operation of Two.js Class1