How to realize Water Polo loading Animation with JavaScript canvas

This article mainly explains "JavaScript canvas how to achieve water polo loading animation", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "JavaScript canvas how to achieve water polo loading animation" bar!

Effect display:

Source code display:

Canvas implements water polo loading animation body {display:flex; flex-flow:column wrap; justify-content:center; align-items:center;} # c {margin-top:20px;} input [type=range]:: before {content:attr (min); color:#000 Padding-right:5px;} input [type=range]:: after {content:attr (max); color:#000; padding-left:5px;} the current browser does not support canvas. Please upgrade! Canvas = document.getElementById ("c"); ctx = canvas.getContext ("2d"); oRange = document.getElementsByName ("range") [0]; M = Math; Sin = M.sin; Cos = M.cosm; Sqrt = M.sqrt; Pow = M.mom; PI = M.PI; Round = M.conversation; oW = canvas.width = 300; oH = canvas.height = 300 / / linewidth lineWidth = 2 / / large radius r = (oW / 2); cR = r-8 * lineWidth; ctx.beginPath (); ctx.lineWidth = lineWidth; / / initial parameters of water wave animation axisLength = 2 * r-16 * lineWidth; / / Sin figure length unit = axisLength / 8; / / Wave width range = .2 / / Wave amplitude nowrange = range; xoffset = 8 * lineWidth / / x axis offset data = ~ (oRange.value) / 100; / / amount of data sp = 0; / / periodic offset nowdata = 0; waveupsp = 0.002; / / rising speed of water wave / / initial parameter of circle animation arcStack = []; / round stack bR = r-8 * lineWidth; soffset =-(PI / 2); / / start position of circle animation circleLock = true / / start animation lock / / get the circle animation track point set for (var I = soffset; I

< soffset + 2 * PI; i += 1 / (8 * PI)) { arcStack.push([ r + bR * Cos(i), r + bR * Sin(i) ]) } cStartPoint = arcStack.shift(); // 圆起始点 ctx.strokeStyle = "#1c86d1"; ctx.moveTo(cStartPoint[0], cStartPoint[1]) render(); // 开始渲染 function drawSine() { ctx.beginPath(); ctx.save(); var Stack = []; // 记录起始点和终点坐标 for (var i = xoffset; i = 0.85) { if (nowrange >

Range / 4) {var t = range * 0.01; nowrange-= t;} else if (data 0) {nowdata + = waveupsp;} if ((data-nowdata) < 0) {nowdata-= waveupsp} sp + = 0.07 DrawSine (); drawText () } requestAnimationFrame (render)} feeling: recently, I have contributed a little case in my teaching. I hope I can give you some help. I hope you will continue to follow my blog. Wang, thank you for your reading. The above is the content of "JavaScript canvas how to achieve water polo loading animation". After the study of this article, I believe you have a deeper understanding of how to achieve water polo loading animation in JavaScript canvas, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!