Today I introduce a plug-in 2.js which is not commonly used on the Internet. In the beginning of learning, I found that there is no suitable tutorial on the Internet, and I will publish the basic operation here.

two.js is a two-dimensional drawing software for web pages, which can produce various animation effects in specified areas.

The download address is as follows: https://two.js.org/ Download

class1:

First: How to use:

Firstly, the js file is introduced into the page:

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

Open the Web Console console, enter Two, and return an array to prove that it is in effect, as shown in the figure:

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 div above in JS

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

Second: Create the shape of space and space:

After completing the above operations, create a two-dimensional space operation

var params = { width: 300, height: 200 };//Two-dimensional space width and height( overflow hidden) 

var two = new Two(params).appendTo(elem);//Create a new one in div Two-dimensional space in

Create graphics:

var circle = two.makeCircle(72, 100, 50);//Create a circle( x Coordinates y Coordinates, radius)
var rect = two.makeRectangle(213, 100, 100, 100);//Create Rectangles( x，y，Width, height)

Third, adjust the graphic attributes:

// Specifically set different attributes
        circle.fill = '#FF8000';//fill Fill color
        circle.stroke = 'red'; // border color
        circle.linewidth = 5;//Edge width
        circle.opacity = 0.5;//transparency
        
        rect.fill = 'blue';
        rect.opacity = 0.75;
        rect.stroke = "white";
        rect.linewidth = 5;
　　　　 rect.noStroke();//Remove the sideline

Fourth: Projecting to the Web:

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

two.update();

The effect on the web page is shown in the figure.

Fifth: The role and establishment of the group:

A group can merge several graphics into a group, and a group can set the same properties and effects.

After creating the graph, you can execute the following code:

var group = two.makeGroup(circle, rect);

Place two graphics in a group

// Property settings can be made for all shapes in a group
        group.translation.set(two.width / 2, two.height / 2);//Where do we keep the center in two-dimensional space by shifting all the shapes in a group?
        group.rotation = Math.PI;//rotate
        group.scale = 0.75;//zoom
        
        group.linewidth = 7;//Unified Width Setting

All shapes in the group are operated on the same way by the above instructions

The picture above shows the effect of two shapes after operation.

So much for today. Next time, I'll explain in detail how to create animation effects.

Learned little partner remember some praise!