An example of canvas pulse motion in HTML5

Simulate a spherical pulse motion.

The constructor of the ball is as follows:

The constructor of a sphere
function Ball (radius, color) {
if (radius = = = undefined) {radius = 40;}
if (color = = undefined) {color = ' #ff0000 ';}
this.x = 0;
This.y = 0;
This.radius = radius;
this.rotation = 0;
This.scalex = 1;
This.scaley = 1;
This.color = color;
This.linewidth = 1;
}
Ball.prototype.draw = function (context) {
Context.save ();
Context.translate (this.x, THIS.Y);
Context.rotate (this.rotation);
Context.scale (This.scalex, This.scaley);
Context.linewidth = This.linewidth;
Context.fillstyle = This.color;
Context.beginpath ();
Context.arc (0, 0, This.radius, 0, Math.PI * 2, true);
Context.closepath ();
Context.fill ();
if (This.linewidth > 0) {
Context.stroke ();
}
Context.restore ();
}

Two. Analysis of ideas:

The pulse effect can be produced by changing the ratio of the spherical to the sinusoidal value.

As follows:

<canvas id= "Canvas" width= "height=" style= "background": #ccc; ></canvas>

var canvas = document.getElementById ("Canvas"),
Context = Canvas.getcontext ("2d"),
Ball = new ball (),
Angle = 5,
Centerscale = 1,
Range = 0.5,
Speed = 0.05;

ball.x = CANVAS.HEIGHT/2;
Ball.y = CANVAS.HEIGHT/2;
ball.linewidth = 0;

(function Drawframe () {
    window.requestanimationframe (drawframe, canvas);
     Context.clearrect (0, 0, canvas.width, canvas.height);
    Ball.scalex = Ball.scaley = Centerscale + math.sin (angle) * range;
    angle + = speed;
    Ball.draw (context);
}) ();