HTML5 elliptical ball

 

Elliptical and elliptical motion:

 

 

 

Var canvas = document. getElementById ("ballBroad ");

 

Var context = canvas. getContext ("2d ");

// Angle

Var angle = 0;

// Angle step size

Var speedangles = 0.1;

// Refresh frequency

Var frames = 1000/60;

// Ball object

Var Ball = function (radius, color, x, y)

{

This. radius = radius;

This. color = color;

This. x = x;

This. y = y;

}

// Center point

Var centerX = canvas. width/2;

Var centerY = canvas. height/2;

// Store the vertices that the ball has traveled.

Var points = [];

// Create a ball

Var newBall = new Ball (20, "# ff000", 0, centerY );

// Draw the ball in the middle of the canvas

// DrawBall (newBall );

// Store

// Points. push ({x: newBall. x, y: newBall. y });

// Let the ball move smoothly

Var drawAsync = eval (Jscex. compile ("async", function (){

While (true)

{

NewBall. y = centerY + Math. sin (angle) * (centerY/2 + 20 );

NewBall. x = centerX + Math. cos (angle) * centerX;

Angle + = speedAngle;

DrawBall (newBall );

// Point for storing the ball

Points. push ({x: newBall. x, y: newBall. y });

// Draw a line

DrawBallLine ();

// Draw an egg ache

DrawText ("egg pain", centerX-50, centerY );

// 60 times per second

$ Await (Jscex. Async. sleep (frames ));

}

}));

DrawAsync (). start ();

Function DrawBall (ball)

{

Context. clearRect (0, 0, canvas. width, canvas. height );

// Draw the ball in the middle of the canvas

Context. beginPath ();

Context. arc (ball. x, ball. y, newBall. radius, 0, 2 * Math. PI, false );

Context. fillStyle = ball. color;

Context. fill ();

Context. lineWidth = 5;

Context. strokeStyle = "# ff0000 ";

Context. stroke ();

}

// Draw the moving track of the ball

Function DrawBallLine ()

{

For (var I = 0; I <points. length; I ++)

{

If (I = 0)

{

Context. moveTo (points [I]. x, points [I]. y)

}

Context. lineTo (points [I]. x, points [I]. y)

Context. stroke ();

}

}

// It hurts

Function DrawText (text, x, y)

{

Context. font = "40pt Arial ";

Context. fillText (text, x, y );

}

 

 

 

 

 

 

 

Author: Louja