An example of H5+JS two-dimensional animation production

Today I introduce a plug-in two.js that is not commonly used on the Internet. When I first started learning, I found that there was no suitable tutorial on the Internet. I will publish the basic operation here.

two.js is a web page Two-dimensional drawing software can produce various self-set animation effects in a designated area

The download URL is as follows:

class1:

1: How to use:

First introduce the js file into the page:

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

Open the web console console and enter Two. If an array is returned, it proves that it has taken 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 above div in JS

var elem = document.getElementById('draw-shapes');//选中页面上的div

two : Create space and shapes in space:

After completing the above operations, perform the operation of creating a two-dimensional space

  = { width: , height:  }; 

 two =  Two().appendTo(elem);

Create graphics:

var circle = two.makeCircle(72, 100, 50);//创建圆形（x坐标，y坐标，半径）var rect = two.makeRectangle(213, 100, 100, 100);//创建矩形（x，y，宽，高）

Three: Adjust the graphic properties:

circle.fill = ;circle.stroke = ; circle.linewidth = ;circle.opacity = ;= = = = ;
　　　　 rect.noStroke();//去掉边线

Four: Project to the web page:

Project the generated space and graphics to the web page, which requires input The following command:

two.update();

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

5: The role and establishment of groups:

A group can merge several graphics into one group, and a group can set the same attributes and effects

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

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

Put two shapes into a group

// 可以对组内所有形状进行属性设定group.translation.set(two.width / 2, two.height / 2);//让一个组内所有的形状位移，使中心保持在二维空间的什么位置group.rotation = Math.PI;//旋转group.scale = 0.75;//缩放        
        group.linewidth = 7;//统一设置线宽

Use the above instructions to perform the same operation on all shapes in the group

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

That’s all for today. Next time I will explain in detail how to create the animation effect

If you have learned it, remember to like it!

The above is the detailed content of An example of H5+JS two-dimensional animation production. For more information, please follow other related articles on the PHP Chinese website!