Canvas Application-Introduction

Introduced

Before developing animation applications you may need to learn a complex animation framework. Since the advent of the HTML5 canvas feature, Web animations have dropped from the cloud to the ground all at once-any web programmer can easily +javascript with canvas technology to develop a variety of animation effects.

The following tutorial will use another Web animation toolkit called Kinetic. All of them are open source.

We need to understand a few APIs in the canvas and then use the required animation parameters to create a web animation that is interesting and responsive to your actions. Put your mouse on the clown's face above and move it to see if it will happen.

Basic structure

KINETICJS first is to bind to a DOM container element on an HTML page, such as the most commonly used < div > tag. The browser finally shows the overlay effect of these user layers.

Drawing interface

Now we are starting to make our picture with kinetic.

The basic flow of the kinetic drawing can be as follows:

The first is to create a HTML5 page that adds a reference to the kinetic library:

<script type= "Text/javascript" src= "Kinetic-v5.1.0.min.js" ></script>

Add a container for binding to kinetic for creating the stage, such as a < div;:

<div id= "" Container "" ></div>

Drawing when a page is loaded

1. Window.onload =function() {    //Defining global Variables    varSW = 578; varSH = 400; //Create kinetic stage, bind the <div> container we added    varstage =Newkinetic.stage ({container: "container",//ID of <div>Width:578,//the created stage widthHeight:400//height of the stage created    }); //creating the Kinetic user layer    varLayer =NewKinetic.layer ();}</div></div>

Draw the clown's left eye and right eye

First we need to create the Kinetic object and call the line () method to draw.

Use the methods in the Kinetic Toolkit to draw the left and right eye

1. // Create a Kinetic linear object var New kinetic.line ({    points,  //  X-axis position    : [0, +, +, +, +, +,--]  c11>//  position point    tension:0.5,  //  line elasticity    true,     // Line Color    Strokewidth:10  //  line width });

   // Create a Kinetic linear object var New kinetic.line ({    --),    points: [0,    +,------- c11/>True,    ' white ',    ten   }); // Add the above line to the user layer Layer.add (Lefteye). Add (righteye); // Add the above user layer to the stage stage.add (layer);

Draw nose and mouth

Draw nose and mouth

2.  var  nose = new   Kinetic.line ({points: [, 280, SW/2, sw-240,280], Tension:0.5, CL osed:  true   stroke:  ' white ' , Strokewidth:  10});  

    var  mouth = new   Kinetic.line ({points: [], 340, SW/2, 380, sw-150, 340, Sw/2 0.5 true  , stroke:  ' red '  10 

Left and right eye animation

Let the clown's left and right eye can move, need to listen to the event, use two events when the pointer is over the element (mouseover), the mouse from the element on the move (Mouseout), to perform animation operations.

1. var New Kinetic.tween ({    node:lefteye,    1,    easing:Kinetic.Easings.ElasticEaseOut,    100 ,    points: [0, +,--------]

   var New Kinetic.tween ({    node:righteye,    1,    Easing:Kinetic.Easings.ElasticEaseOut,    -100,    points: [0, +,-------]

Nose and mouth animations

1. var New Kinetic.tween ({    node:nose,    1,      easing:Kinetic.Easings.ElasticEaseOut,    100 ,    points: [

   var New Kinetic.tween ({    node:mouth,    1,    Easing:Kinetic.Easings.ElasticEaseOut,    Points: [+, +, SW/2, +, sw-100, SW/2, sh-20]});

There are some things you can go to the following website to see:

http://www.hubwiz.com/course/55adf42f3ad79a1b05dcbff0/

Blog Park starter Forwarding please indicate the source: http://www.cnblogs.com/huizhiwang/

Canvas Application-Introduction