< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title > test < / title >
< style >
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
-sharpc {
margin: 0 auto;
margin-top:10px;
margin-bottom: 10px;
margin-top: 20px;
position: absolute;
left: -32px;
top:-51px;
}
.ball{
width:120px;
height:120px;
background:rgba(124,68,209,1);
box-shadow:0px 1px 8px 0px rgba(0,0,0,0.2),0px 0px 13px 0px rgba(255,255,255,0.3);
border-radius: 50%;
position: relative;
}
< / style >
< / head >
< body >
<div class="ball">
<canvas id="c">canvas </canvas>
</div>
< / body >
< script >
canvas = document.getElementById ("c");
ctx = canvas.getContext ("2d");
M = Math;
Sin = M.sin;
Cos = M.Cos;
Sqrt = M.sqrt;
Pow = M.Q.;
PI = M.PI;
Round = M.C.;
oW = canvas.width = 184;
oH = canvas.height = 184;
/ / Lineweight
lineWidth = 2
/ / large radius
r = (oW / 2);
console.log ("r", r)
cR = r-8 linewidth;
console.log ("cr", cR)
ctx.beginPath ();
ctx.lineWidth = lineWidth;
/ / initial parameters of water wave animation
axisLength = 2 r-16 lineWidth; / / Sin figure length
unit = axisLength / 9; / / Wave width
range = .4 / / Wave amplitude
nowrange = range;
xoffset = 8 * lineWidth; / / x axis offset
data = 55 / 100; / / data
sp = 0; / / Periodic offset
nowdata = 0;
waveupsp = 0.009; / Water Wave rising Speed
/ / the initial parameters of circle animation
arcStack = []; / / circle stack
bR = rMui 8lines width;
soffset =-(PI/2); / / start position of circle animation
circleLock = true; / start animation lock
cStartPoint = arcStack.shift (); / / starting point of the circle
ctx.strokeStyle = "- sharp1c86d1";
render (); / / start rendering
function drawSine () {
ctx.beginPath ();
ctx.save ();
var Stack = []; / / record the starting and ending coordinates
for (var I = xoffset; I < = xoffset + axisLength; i+=20/axisLength) {
var x = sp + (xoffset + i) / unit;
var y = Sin(x) * nowrange;
var dx = i;
var dy = 2*cR*(1-nowdata) + (r - cR) - (unit * y);
ctx.lineTo(dx, dy);
Stack.push([dx,dy])}
/ / get the starting and ending points
var startP = Stack [0]
var endP = Stack [Stack.length-1]
ctx.lineTo (xoffset + axisLength,oW);
ctx.lineTo (xoffset,oW);
ctx.lineTo (startP [0], startP [1])
var grd = ctx.createLinearGradient (0,0,200,0);
grd.addColorStop (0, "- sharpFAD961");
grd.addColorStop (1, "- sharpF76B1C");
ctx.fillStyle = grd
ctx.fill ()
ctx.restore ();
}
function render () {
ctx.clearRect;
if (circleLock) {
if (arcStack.length) {
var temp = arcStack.shift();
ctx.lineTo(temp[0],temp[1])
ctx.stroke();
} else {
circleLock = false;
ctx.stroke();
arcStack = null;
ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.arc(r,r, bR, 0, 2*PI, 1);
ctx.beginPath();
ctx.save();
ctx.arc(r,r, r-16*lineWidth, 0, 2*PI, 1);
ctx.restore()
ctx.clip();
}} else {
//
//
if (data >= 0.85) {
if (nowrange > range/4) {
var t = range * 0.01;
nowrange -= t;
}
} else if (data <= 0.1) {
if (nowrange < range*1.5) {
var t = range * 0.01;
nowrange += t;
}
} else {
if (nowrange <= range) {
var t = range * 0.01;
nowrange += t;
}
if (nowrange >= range) {
var t = range * 0.01;
nowrange -= t;
}
}
if((data - nowdata) > 0) {
nowdata += waveupsp;
}
if((data - nowdata) < 0){
nowdata -= waveupsp
}
sp += 0.07;
drawSine();}
requestAnimationFrame (render)
}
< / script >