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

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

背后的水是可以动的

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>动态进度加载小球</title>
  6.     <style>
  7.         #c{
  8.             margin: 0 auto;
  9.             display: block;
  10.         }
  11.         #r{
  12.             display: block;
  13.             margin: 0 auto;
  14.         }
  15.         #r::before{
  16.             color: black;
  17.             content: attr(min);
  18.             padding-right: 10px;
  19.         }
  20.         #r::after{
  21.             color: black;
  22.             content: attr(max);
  23.             padding-left: 10px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <canvas id="c"></canvas>
  29.     <input type="range" id="r" min="0" max="100" step="1">
  30.     <script>
  31.         var canvas = document.getElementById('c');
  32.         var ctx = canvas.getContext('2d');
  33.         var range = document.getElementById('r');
  34.  
  35.         //range控件信息
  36.         var rangeValue = range.value;
  37.  
  38.         var nowRange = 0;   //用于做一个临时的range
  39.  
  40.         //画布属性
  41.         var mW = canvas.width = 250;
  42.         var mH = canvas.height = 250;
  43.         var lineWidth = 2;
  44.  
  45.         //圆属性
  46.         var r = mH / 2; //圆心
  47.         var cR = r - 16 * lineWidth; //圆半径
  48.  
  49.         //Sin 曲线属性
  50.         var sX = 0;
  51.         var sY = mH / 2;
  52.         var axisLength = mW; //轴长
  53.         var waveWidth = 0.015 ;   //波浪宽度（曲线周期）,数越小越宽
  54.         var waveHeight = 6; //波浪高度（波峰）,数越大越高
  55.         var speed = 0.09; //波浪水平速度，数越大速度越快
  56.         var xOffset = 0; //波浪x偏移量
  57.  
  58.         ctx.lineWidth = lineWidth;
  59.  
  60.         //画圈函数
  61.         var IsdrawCircled = false;
  62.         var drawCircle = function(){
  63.  
  64.             ctx.beginPath();
  65.             ctx.strokeStyle = '#1080d0';
  66.             //画外圆
  67.             ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
  68.             ctx.stroke();
  69.             ctx.beginPath();
  70.             //显示水部分的圆
  71.             ctx.arc(r, r, cR, 0, 2 * Math.PI);
  72.             //剪裁圆形，去掉多于的水
  73.             ctx.clip();
  74.  
  75.         }
  76.  
  77.         //画sin 曲线函数
  78.         var drawSin = function(xOffset){
  79.             ctx.save();
  80.  
  81.             var points=[];  //用于存放绘制Sin曲线的点,用于封闭曲线
  82.  
  83.             ctx.beginPath();
  84.             //在整个轴长上取点
  85.             for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
  86.  
  87.                 //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
  88.                 //y=sin(TX+x)
  89.                 var y = -Math.sin((sX + x) * waveWidth + xOffset);
  90.                 //dY是波浪的高度，－是因为水从下往上
  91.                 var dY = mH * (1 - nowRange / 100 );
  92.  
  93.                 points.push([x, dY + y * waveHeight]);
  94.                 //描绘点
  95.                 ctx.lineTo(x, dY + y * waveHeight);
  96.             }
  97.             //现在一条线从左端绘制到了右端
  98.             //封闭路径
  99.             //接着连右下端
  100.             ctx.lineTo(axisLength, mH);
  101.             //左下端
  102.             ctx.lineTo(sX, mH);
  103.             //曲线图的最左端
  104.             //封闭完成后，调用上面的ctx.clip()，去掉圆外面的水
  105.             ctx.lineTo(points[0][0],points[0][1]);
  106.             ctx.fillStyle = '#1c86d1';
  107.             ctx.fill();
  108.  
  109.             ctx.restore();
  110.  
  111.         };
  112.  
  113.         //写百分比文本函数
  114.         var drawText = function(){
  115.             ctx.save();
  116.  
  117.             var size = 0.4*cR;
  118.             ctx.font = size + 'px Microsoft Yahei';
  119.             ctx.textAlign = 'center';
  120.             ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
  121.             ctx.fillText(nowRange + '%', r, r + size / 2);
  122.  
  123.             ctx.restore();
  124.         };
  125.  
  126.         var render = function(){
  127.             ctx.clearRect(0, 0, mW, mH);
  128.             //通过不断刷新来获取range的值
  129.             rangeValue = range.value;
  130.             if(IsdrawCircled == false){
  131.                 drawCircle();
  132.             }
  133.             //如果拖动input，就安每次加减1的速度增减
  134.             if(nowRange <= rangeValue){
  135.                 var tmp = 1;
  136.                 nowRange += tmp;
  137.             }
  138.  
  139.             if(nowRange > rangeValue){
  140.                 var tmp = 1;
  141.                 nowRange -= tmp;
  142.             }
  143.             //不停的偏移，让波浪动起来
  144.             drawSin(xOffset);
  145.             drawText();
  146.             //偏移量加大
  147.             xOffset += speed;
  148.  
  149.             requestAnimationFrame(render);
  150.         }
  151.  
  152.         render();
  153.     </script>
  154. </body>
  155. </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. Codeforces 954 E. Water Taps

    http://codeforces.com/problemset/problem/954/E 式子变成Σ xi*(ti-T)=0 sum0表示>=T的ai*ti之和 sum1表示<T的ai ...

  2. docker入门（三）

    docker容器IP"暴露"到外网(宿主机外) 首先将docker容器IP固定 Docker自身的4种网络工作方式,简略说明下: host模式,使用--net=host指定. co ...

  3. 【转】基于VSM的命名实体识别、歧义消解和指代消解

    原文地址:http://blog.csdn.net/eastmount/article/details/48566671 版权声明:本文为博主原创文章,转载请注明CSDN博客源地址!共同学习,一起进步 ...

  4. 20155332 2016-2017-2 《Java程序设计》第7周学习总结

    20155332 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 了解Lambda语法 了解方法引用 了解Fucntional与Stream API 掌握Da ...

  5. 解决ping 127.0.0.1 一般故障 问题

    ​故障如下图: 绕了好一大圈才发现是goupi防火墙搞的鬼,弄得我一些软件一直运行不了!!!!! 废话不多说,关了防火墙就行了:操作步骤如下图示 ​ 关闭之后,美滋滋: ​ ​

  6. Linux系统7z文件解压

    获取p7zip_16.02_src_all.tar.bz2 1.解压 tar jxvf p7zip_16.02_src_all.tar.bz2 2.编译 cd p7zip_16.02 make &am ...

  7. VS "以下文件中的行尾不一致,要将行尾标准化吗?"

    原文地址:http://www.cnblogs.com/yymn/p/6852857.html 这是由Windows和Unix不同的标准引起的...即“回车”和“换行”的问题... “回车”和“换行” ...

  8. 为cobbler自动化安装系统工具添加epel源

    关于cobbler的安装及部署,参考:CentOS 6.5自动化运维之基于cobbler服务的自动化安装操作系统详解http://blog.csdn.net/reblue520/article/det ...

  9. JavaScript中unicode编码与String互转（三种方法）

    1.引言 JS本身就支持unicode转string功能,一共有三种方式和String单个字符转unicode编码. 2.方法 //unicode转String 1. eval("'&quo ...

  10. LINUX-CUDA版本所对应的NVIDIA驱动版本号，cuda版本报错的朋友参考一下

    CUDA 10.0: 410.48 CUDA .xx CUDA .xx (update) CUDA .xx CUDA .xx (GA2) CUDA .4x CUDA .xx CUDA .xx CUDA ...