Canvas Dynamic Progress Loading water polo
Objective
Before seeing some ball type dynamic loading effect, always want to do a do-it-yourself, just this period of time to relive a canvas, so just try it.
Realize the idea
On the realization of water wave, the sin() function is used to realize the dynamic effect of water wave through the continuous function curve of each frame sin() . Then, by drawing a circular path, the clip() ball-shaped effect is achieved.
Sin () function related
Here's how the sin() function is related to the effect of drawing water waves.
Take a look at the picture and review sin() the basics of the middle school function.
As can be seen from the diagram, when the function is, the range sin(x) is [-1, 1] , the cycle is 2π .
When sin(x) multiplied by a number, you can change the range, which is the peak, as shown below:
The coefficient is more steep than the 1 o'clock curve, less than 1 greater than 0 o'clock curve more slow.
When sin(x ± 某个数) , the realization of the curve of the left and right move, minus time to move to the left, overtime.
When the cycle sin(x * 某个数) of the curve changes, a number is greater than 1 o'clock, the cycle is shorter, a number less than 1 greater than 0 o'clock, the cycle becomes longer.
At a point, sin() is a periodic function, so as long as the constant value to it, it will be cyclical changes.
Well, sin() the math is pretty much the same, and then start getting started.
Draw sin () curve
var canvas = document.getElementById (' C ');
var ctx = Canvas.getcontext (' 2d ');
Canvas Properties
var MW = canvas.width = m;
var MH = Canvas.height =;
var linewidth = 1;
Sin curve attribute
var sX = 0;
var SY = MH/2;
var axislength = MW; Axis length
var wavewidth = 0.011;//wave width, the smaller the number the wider
the var waveheight = 70;//wave height, the higher the number, the greater the
ctx.linewidth = linewidth;
//picture sin curve function
var drawsin = functions (xoffset) {
ctx.save ();
var points=[]; A point Ctx.beginpath () for storing the sin curve
;
Point to the entire axis length for
(var x = SX; x < SX + axislength x + = 20/axislength) {
//here Coordinates (X,Y), depending on the formula "amplitude High *sin" (x* amplitude width + Vibration Amplitude offset) "
var y =-math.sin (SX + x) * wavewidth);
Points.push ([x, SY + y * waveheight]);
Ctx.lineto (x, SY + y * waveheight);
}
Closed path
ctx.lineto (Axislength, MH);
Ctx.lineto (SX, MH);
Ctx.lineto (points[0][0],points[0][1]);
Ctx.stroke ()
ctx.restore ();
Drawsin ()
waveWidth waveHeight the steepness and periodicity of the curve are passed and adjusted here.
Add Dynamic Effect
var speed = 0.04; //波浪速度，数越大速度越快
var xOffset = 0; //波浪x偏移量
Speed variable and x offset variable
var y = -Math.sin((sX + x) * waveWidth + xOffset);
Modifies the function of the Y-point.
var render = function () {
ctx.clearrect (0, 0, MW, MH);
Drawsin (xoffset);
Xoffset + = speed; Forming dynamic effect
requestanimationframe (render);
}
Render ()
Add a render.
Percent control
Because you want to add a different percentage of the increase effect, so you want to the coordinates of Y of the percentage control changes.
var dY = mH * (1 - nowRange / 100 );
Ball type Display
Here you need to use clip() a ball-type trim display.
Ctx.beginpath (); Ctx.arc (R, R, CR, 0, 2 * math.pi); Ctx.clip ();
Other
You can modify the shape and speed of the curve by modifying the following variables:
var wavewidth = 0.015; The wave width, the smaller the width var waveheight = 6;//wave height, the larger the number the higher the var speed = 0.09;//wave speed, the faster the number.
Complete code
<!doctype html>
Effect
Thank you for reading, I hope to help you, thank you for your support for this site!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
