Home > Web Front-end > JS Tutorial > An example of H5+JS two-dimensional animation production

An example of H5+JS two-dimensional animation production

零下一度
Release: 2017-06-24 14:26:36
Original
2240 people have browsed it

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>
Copy after login

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>
Copy after login

Select the above div in JS

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

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);
Copy after login

Create graphics:

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

Three: Adjust the graphic properties:

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

Four: Project to the web page:

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

two.update();
Copy after login

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);
Copy after login

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;//统一设置线宽
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template