这个特效是别的人，非原创。原创地址

http://blog.csdn.net/lecepin/article/details/53536445

背后的水是可以动的

代码我再研究了下，下面是加了注释的代码。不是原创好像没什么好说的了。。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动态进度加载小球</title>

    <style>

        #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;

        }

    </style>

</head>

<body>

    <canvas id="c"></canvas>

    <input type="range" id="r" min="0" max="100" step="1">

    <script>

        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*振幅宽 + 振幅偏移量)”

                //y=sin(TX+x)

                var y = -Math.sin((sX + x) * waveWidth + xOffset);

                //dY是波浪的高度，－是因为水从下往上

                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.clip()，去掉圆外面的水

            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);

            //通过不断刷新来获取range的值

            rangeValue = range.value;

            if(IsdrawCircled == false){

                drawCircle();

            }

            //如果拖动input，就安每次加减1的速度增减

            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>

</body>

</html>

canvas百分百特效的更多相关文章

  1. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  2. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  3. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  4. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. 几十行js实现很炫的canvas交互特效

    几十行js实现很炫的canvas交互特效 废话不多说,先上效果图! 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频,他还出了很多关于canvas的视频,十分值得学习, ...

  6. html5 canvas 粒子特效

    不知不觉就已经好久没写过博客了,自从七月正式毕业后,离开了实习了将近九个月的老东家,进了鼠厂后,做的事都是比较传统的前端活,之前在tpy的时候只管做移动h5的特效以及小游戏,再加上实习所以时间比较充裕 ...

  7. canvas焰火特效

    之前在抖音上看到了一个很漂亮的焰火效果.这会儿有时间就用canvas实现了一下. 演示地址:http://suohb.com/work/firework4.htm 先看效果:(静态图片看不太出效果,请 ...

  8. canvas雪花特效-jQuery插件实现

    这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...

  9. canvas入门级基本用法实现雨滴下落特效

    canvas基础知识点参考各种文档,直接上代码,有非常详细注释 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. POJ3635 Full Tank?【Dijkstra+DP】

    题意: n个城市之间有m条双向路.每条路要耗费一定的油量.每个城市的油价是固定并且已经给出的.有q个询问,表示从城市s走到e,油箱的容量为c,求最便宜的方案. 思路: 用Dijkstra+Heap即可 ...

  2. 第15月第29天 ffmpeg AVERROR_EOF

    1. 在直播时返回AVERROR_EOF代表流结束吗?但对方还在直播,没有结束. int ret = av_read_frame(mContext, pkt); if (ret == AVERROR_ ...

  3. JavaScript学习 - 基础(七) - DOM event(事件)

    DOM event(事件) 定义事件: // 定义事件: //方式一,直接在标签上定义事件 // 方式二: var a11 = document.getElementsByName('a11')[0] ...

  4. python - 数据描述符(class 内置 get/set/delete方法 )

    数据描述符(class 内置 get/set/del方法 ): # 什么是描述符 # 官方的定义:描述符是一种具有“捆绑行为”的对象属性.访问(获取.设置和删除)它的属性时,实际是调用特殊的方法(_g ...

  5. 实验一 Java开发环境的熟悉--20165221

    实验报告封面 课程:Java程序设计 班级:1652班 姓名:谭笑 学号:20165221 成绩: 指导教师:娄嘉鹏 试验日期:2018.4.2 实验组次:21 预习程度:已预习 实验时间:15:35 ...

  6. CentOS和RedHat Linux的区别

    RHEL 在发行的时候,有两种方式.一种是二进制的发行方式,另外一种是源代码的发行方式. 无论是哪一种发行方式,你都可以免费获得(例如从网上下载),并再次发布.但如果你使用了他们的在线升级(包括补丁) ...

  7. 恶意PDF文档分析记录

    0x1 PDF是什么 PDF(便携式文件格式,Portable Document Format)是由Adobe Systems在1993年用於文件交换所发展出的文件格式. 因为PDF的文件格式性质广泛 ...

  8. 【windows核心编程】系统消息与自定义钩子（Hook）使用

    一.HOOk Hook是程序设计中最为灵活多变的技巧之一,在windows下,Hook有两种含义: 1.系统提供的消息Hook机制 2.自定义的Hook编程技巧 其中,由系统提供的消息钩子机制是由一系 ...

  9. python中argparse模块用法实例详解

    python中argparse模块用法实例详解 这篇文章主要介绍了python中argparse模块用法,以实例形式较为详细的分析了argparse模块解析命令行参数的使用技巧,需要的朋友可以参考下 ...

  10. How to scroll down with Phantomjs to load dynamic content

    page.open('http://example.com/?q=houston', function () { // Checks for bottom div and scrolls down f ...