Examples of canvas circular motion and elliptical motion in HTML5

A. Circular motion

1.1 Thought Analysis:

The equations of the circle are:

(x0, y0) is the center of the circle; (x, y) is the point on the circle.
(x-x0) ^ 2 + (y-y0) ^ 2 = r ^ 2
cos (angle) ^ 2 + sin (angle) ^ 2 = 1
Therefore, the combination of the above two-type, can be:

x = R * cos (angle) + x0
y = R * sin (angle) + y0

Therefore, the sine function is used to compute the y-coordinate and the cosine function is used to compute the x-coordinate.

1.2 Examples:

Compatible functions for Cancelrequestanimframe
Window.cancelrequestanimframe = (function () {
return Window.cancelanimationframe | |
Window.webkitcancelrequestanimationframe | |
Window.mozcancelrequestanimationframe | |
Window.ocancelrequestanimationframe | |
Window.mscancelrequestanimationframe | |
cleartimeout;
} )();

Window.onload = function () {
var canvas = document.getElementById ("Canvas"),
Context = Canvas.getcontext ("2d"),
Ball = new ball (2),
Angle = 0,
CenterX = CANVAS.WIDTH/2,
CenterY = CANVAS.HEIGHT/2,
Radius = 50,
Speed = 0.05,
timer = null;

ball.linewidth = 0;

(function Drawframe () {
Timer = window.requestanimationframe (drawframe, canvas);
if (Angle > Math.PI * 2 && timer) {
Window.cancelrequestanimframe (timer);
timer = null;
}
Context.clearrect (0, 0, canvas.width, canvas.height);
BALL.Y = centery + math.sin (angle) * RADIUS;
ball.x = CenterX + math.cos (angle) * RADIUS;
Angle + = speed;

Ball.draw (context);
})();
}

Two. Elliptical motion

2.1 Thought Analysis:

The equation of the ellipse is:

(x0, y0) is the center position of the ellipse; (x, y) is the point on the ellipse
[(x-x0)/RadiusX] ^ 2 + [(y-y0)/radiusy] ^ 2 = 1
cos (angle) ^ 2 + sin (angle) ^ 2 = 1
Therefore, the combination of the above two-type, can be:

x = radiusx * cos (angle) + x0
y = radiusy * sin (angle) + y0
The coordinate value of ellipse motion can be obtained.

2.2 Examples:

Compatible functions for Cancelrequestanimframe
Window.cancelrequestanimframe = (function () {
return Window.cancelanimationframe | |
Window.webkitcancelrequestanimationframe | |
Window.mozcancelrequestanimationframe | |
Window.ocancelrequestanimationframe | |
Window.mscancelrequestanimationframe | |
cleartimeout;
} )();

Window.onload = function () {
var canvas = document.getElementById ("Canvas"),
Context = Canvas.getcontext ("2d"),
Ball = new ball (2),
Angle = 0,
CenterX = CANVAS.WIDTH/2,
CenterY = CANVAS.HEIGHT/2,
RadiusX = 150,
RadiusY = 100,
Speed = 0.05,
timer = null;

ball.linewidth = 0;

(function Drawframe () {
Timer = window.requestanimationframe (drawframe, canvas);
if (Angle > Math.PI * 2 && timer) {
Window.cancelrequestanimframe (timer);
timer = null;
}
Context.clearrect (0, 0, canvas.width, canvas.height);
BALL.Y = centery + math.sin (angle) * RADIUSY;
ball.x = CenterX + math.cos (angle) * RADIUSX;
Angle + = speed;

Ball.draw (context);
})();
}