HTML+CSS+JS實作 ??canvas圓形水波進度條影片特效??

🍅 作者主頁：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套》