当前位置:首页 » 《资源分享》 » 正文

HTML+CSS+JS实现 ❤️canvas圆形水波进度条动画特效❤️_java李阳勇的博客

6 人参与  2021年09月19日 09:03  分类 : 《资源分享》  评论

点击全文阅读


  🍅 作者主页: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>

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/28118.html

波浪  振幅  函数  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 女士的玩具推文_杜小灵白月光杜雪必读文_小说后续在线阅读_无删减免费完结_
  • 女儿要给我养老,我却反手把她告上法庭每日分享_林梦王浩养老一口气完结_小说后续在线阅读_无删减免费完结_
  • 闻妻有两意(林鹿小柿子)_闻妻有两意
  • 我的死党是刘秀?这皇位我不篡了(李哲王莽)全书免费_(李哲王莽)我的死党是刘秀?这皇位我不篡了后续(李哲王莽)
  • 逃荒路末世女王带着空间养儿女(周铁山王寡妇阿蛮)_逃荒路末世女王带着空间养儿女(周铁山王寡妇阿蛮)
  • 霍远凡肖灿续集(霍远凡肖灿)章节前文+全书阅读(丈夫逼我流产,我以死谢罪)最新连载
  • 老公给我13.14亲密付,我堕胎再婚后他悔疯了每日分享_苏暖顾川林晚晚超长版_小说后续在线阅读_无删减免费完结_
  • (白瑶,李玄胤,冰冷)白瑶,李玄胤,冰冷小说(九尾渡红尘)无套路无弹窗全部章节列表
  • (此去经年无故人)南初陆南城:结局+番外精品选集起点章节+阅读即将发布预订
  • 沈凝夏叶晚怡附加完整在线阅读(归雁不栖故人枝)最近更新列表
  • 剧情人物是时初,白浩雄的玄幻言情小说《召诸神,踏万界,天命帝女逆乾坤》,由网络作家&ldquo;海鸥&rdquo;所著,情节扣人心弦,本站TXT全本,欢迎阅读!本书共计381345字,185章节,:结局+番外免费品鉴:结局+番外评价五颗星
  • 凤青禾,江明远,***枢小说(别人修仙我捡漏,卷王们破防了)最近更新(凤青禾,江明远,***枢)整本无套路阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1