HTML5 Advanced -9 HTML5 two.js (overview, Getting started)

I. Overview of Two.js

Two.js Introduction

-Two.js is an API for modern Web browsers to draw two-dimensional graphics that allow different contexts to be drawn using the same API

-the context supported by Two.js:

-SVG

-Canvas

-WebGL

-Official Address: http://jonobr1.github.io/two.js/

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/4B/wKiom1b7gLejABOJAABl6ld7GbQ251.png "title=" Web.png "alt=" Wkiom1b7glejabojaabl6ld7gbq251.png "/>

Two.js Features

-Focus on vector graphs:

-Two.js is a vector image with animation effect in depth

-Two.js is committed to creating vector graphics and animation effects more concisely

-Two.js does not support text or pictures

Scene

-Two.js's core is dependent on the scene

-When creating or drawing an object (Two,polygon or Two.group), it is stored and remembered at the same time

-Looping animations:

-Two.js has a built-in looping animation

-Two.js animations can be implemented very simply, and can be used with other animation library configurations

-SVG Interpreter:

-Two.js with SVG interpreter

-Two.js allows developers or designers to create SVG in commercial applications, such as using SVG elements created by Adobe Illustrator into two.js scenarios

Ii. Introduction to Two.js

Use of the Two.js framework

-Introduce the Two.js file in the HTML page:

<script src= "Two.js" ></script>

-Define a container for displaying vector images in an HTML page:

<div id= "Draw-shapes" ></div>

-JavaScript code gets elements:

document.getElementById ("Draw-shapes");

-Draw using API provided by Two.js

New (params). AppendTo (Elem);

Draw a rectangle element

-Two.js framework draws rectangles using the Makerectangle (X,y,width,height) method

Makerectangle (X,y,width,height)

-X: Specifies the coordinate value of the upper-left corner of the drawn rectangle X

-y: Specifies the coordinate value y of the upper-left corner of the drawn rectangle

-width: Specifies the thickness of the drawn rectangle

-Height: Specifies the height of the drawing rectangle

-The Two.js framework draws rectangles using the makecircle (X,y,radius) method:

Makecircle (X,y,radius)

-X: Specifies the coordinate value of the center of the circle to be drawn X

-y: Specifies the coordinate value y of the center of the circle to draw

-Radius: Specifies the radius of the drawn circle

Element grouping

-Element grouping:

-Allows multiple graphs drawn on a page to be grouped into one or more groups through the Two.js framework

-Allows you to manipulate or animate groups by using the API method provided by Two.js

-Create a group:

-implemented by the constructor Two.group () provided by the Two.js framework

-Operate by providing relevant API methods or properties provided by Two.js

-divides drawn shapes into one or more groups:

-Call the Makegroup () method by creating a double object

-Makegroup () method allows multiple drawing objects to be passed

-Operate with related API methods or properties provided by the Two.js framework

Add animations

-Two.play () method:

-this method adds an instance to the Requestanimationframe loop, making the instance animate

-Two.pause () method:

-This method removes an example from Requestanimationframe loop and causes the animation effect of the example to stop

-Two.update () method:

-This method is used to update the dimensions of the graphic drawn in the HTML page, increasing the animation effect

Summary: The content of this chapter mainly introduces the next HTML5 two.js (overview, Getting started)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced -9 HTML5 two.js (overview, Getting started)