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);
}) ();