[Js master path] html5 canvas animation tutorial,

[Js master path] html5 canvas animation tutorial,

Uniform Motion: refers to the movement of an object in a straight line, and the displacement of the object through any equal time interval is equal. In fact, it is a constant linear motion, which is characterized by a zero acceleration. From the definition, we can see that the speed and direction are the same in any equal time interval.

 1 
The above example allows a ball with a radius of 20 Px to rotate at a constant speed to the right at a speed of 2 PX per frame at half the height of x = 0, y = canvas.
We can encapsulate a small ball into an object:
Ball. js file:
 1 function Ball( x, y, r, color ){ 2     this.x = x || 0; 3     this.y = y || 0; 4     this.radius = r || 20; 5     this.color = color || '#09f'; 6 } 7 Ball.prototype = { 8     constructor : Ball, 9     stroke : function( cxt ){10         cxt.strokeStyle = this.color;11         cxt.beginPath();12         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );13         cxt.closePath();14         cxt.stroke();15     },16     fill : function( cxt ){17         cxt.fillStyle = this.color;18         cxt.beginPath();19         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );20         cxt.closePath();21         cxt.fill();22     }23 }
This ball object can customize the location radius and color, and supports two rendering methods (stroke and fill)
 1 
Constant diagonal lines:
 1 
Constant Speed (speed decomposition) in any direction)
 1