??🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼?

主要代碼實現：

CSS樣式：

#c {margin: 0 auto;display: block;}#r {display: block;margin: 0 auto;}#r::before {color: black;content: attr(min);padding-right: 10px;}#r::after {color: black;content: attr(max);padding-left: 10px;}

JavaScript代碼 :

<script type="text/javascript">var canvas = document.getElementById('c');var ctx = canvas.getContext('2d');var range = document.getElementById('r');//range控件信息var rangeValue = range.value;var nowRange = 0; //用于做一個臨時的range//畫布屬性var mW = canvas.width = 250;var mH = canvas.height = 250;var lineWidth = 2;//圓屬性var r = mH / 2; //圓心var cR = r - 16 * lineWidth; //圓半徑//Sin 曲線屬性var sX = 0;var sY = mH / 2;var axisLength = mW; //軸長var waveWidth = 0.015; //波浪寬度,數越小越寬 var waveHeight = 6; //波浪高度,數越大越高var speed = 0.09; //波浪速度，數越大速度越快var xOffset = 0; //波浪x偏移量ctx.lineWidth = lineWidth;//畫圈函數var IsdrawCircled = false;var drawCircle = function() {ctx.beginPath();ctx.strokeStyle = '#1080d0';ctx.arc(r, r, cR + 5, 0, 2 * Math.PI);ctx.stroke();ctx.beginPath();ctx.arc(r, r, cR, 0, 2 * Math.PI);ctx.clip();}//畫sin 曲線函數var drawSin = function(xOffset) {ctx.save();var points = []; //用于存放繪制Sin曲線的點ctx.beginPath();//在整個軸長上取點for (var x = sX; x < sX + axisLength; x += 20 / axisLength) {//此處坐標(x,y)的取點，依靠公式 “振幅高*sin(x*振幅寬 + 振幅偏移量)”var y = -Math.sin((sX + x) * waveWidth + xOffset);var dY = mH * (1 - nowRange / 100);points.push([x, dY + y * waveHeight]);ctx.lineTo(x, dY + y * waveHeight);}//封閉路徑ctx.lineTo(axisLength, mH);ctx.lineTo(sX, mH);ctx.lineTo(points[0][0], points[0][1]);ctx.fillStyle = '#1c86d1';ctx.fill();ctx.restore();};//寫百分比文本函數var drawText = function() {ctx.save();var size = 0.4 * cR;ctx.font = size + 'px Microsoft Yahei';ctx.textAlign = 'center';ctx.fillStyle = "rgba(06, 85, 128, 0.8)";ctx.fillText(~~nowRange + '%', r, r + size / 2);ctx.restore();};var render = function() {ctx.clearRect(0, 0, mW, mH);rangeValue = range.value;if (IsdrawCircled == false) {drawCircle();}if (nowRange <= rangeValue) {var tmp = 1;nowRange += tmp;}if (nowRange > rangeValue) {var tmp = 1;nowRange -= tmp;}drawSin(xOffset);drawText();xOffset += speed;requestAnimationFrame(render);}render();</script>

源碼獲取

大家可以點贊、收藏、關注、評論我啦 、查看博主主頁或下方微信公眾號獲取~！

打卡 文章 更新?45??/? 100天

精彩推薦更新中：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️canvas圆形水波进度条动画特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。