Canvas makes a detailed description of the dynamic progress loading water polo and instance code, canvas water polo

Canvas makes a detailed description of the dynamic progress loading water polo and instance code, canvas water polo

Canvas dynamic progress loading

Preface

I saw some effects of dynamic loading of the sphere. I always wanted to do one by myself. I just went over a Canvas during this time, so I tried it.

Implementation

The implementation of water waves is usedsin()Function, through the constant movement of each framesin()Function curves to achieve the dynamic effect of water waves. Then, by drawing a circular pathclip()To achieve the spherical effect.

Sin () Functions

Let's talk about it here.sin()The basis of the function.

Let's take a look at middle school.sin()The basis of the function.

It can be seen that when the function issin(x)The value range is[-1, 1], Period is2π.

Whensin(x)Multiply by a number to change the value range, that is, the peak value, for example:

When the coefficient is greater than 1, the curve is steep. If the coefficient is less than 1, the curve is slower.

WhenSin (x ± a certain number)To move the left and right of the Curve. When the curve is subtracted, the right is shifted. When the curve is added, the left is shifted.

WhenSin (x * number)The cycle of the curve changes. When a number is greater than 1, the cycle becomes shorter. If a number is less than 1 and greater than 0, the cycle becomes longer.

At one point,sin()Is a periodic function, so as long as you continuously give it a value, it will change periodically.

Okay,sin()The basics of mathematics are almost the same, and then we start to step into the topic.

Draw sin () curve

Var canvas = document. getElementById ('C'); var ctx = canvas. getContext ('2d '); // canvas property var mW = canvas. width = 700; var mH = canvas. height = 300; 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; // The larger the number, the higher the ctx. lineWidth = lineWidth; // draw the sin curve function var drawSin = function (xOffset) {ctx. save (); var points = []; // used to store the point ctx that draws the Sin curve. beginPath (); // take the point for (var x = sX; x <sX + axisLength; x ++ = 20/axisLength) on the axis length {// the coordinates (x, y), relying on the formula "Amplitude height * sin (x * amplitude width + 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 ()

UsewaveWidthAndwaveHeightAdjust the steep degree and period of the curve.

Add dynamic effects

Var speed = 0.04; // The wave speed. The greater the number, the faster the speed.

Var xOffset = 0; // The x offset of the Tilde.

Speed variable and x offset variable

var y = -Math.sin((sX + x) * waveWidth + xOffset);

Modify the y-point function.

Var render = function () {ctx. clearRect (0, 0, mW, mH); drawSin (xOffset); xOffset + = speed; // form the dynamic effect requestAnimationFrame (render);} render ()

Add rendering.

Percentage Control

Because we want to add different percentage increases, we need to control and modify the percentage of rows in y coordinates.

var dY = mH * (1 - nowRange / 100 );

Spherical display

Used hereclip()Perform ball cutting and display.

ctx.beginPath();ctx.arc(r, r, cR, 0, 2 * Math.PI);ctx.clip();

Others

You can modify the following variables to modify the curve shape and speed:

Var waveWidth = 0.015; // wave width, the smaller the number, the wider the var waveHeight = 6; // The larger the number, the higher the var speed = 0.09; // The wave speed, the higher the number, the faster the speed.

Complete code

<! Doctype html> 
Effect



Thank you for reading this article. I hope it will help you. Thank you for your support for this site!