本文实例为大家分享了canvas实现水球加载动画的具体代码，供大家参考，具体内容如下

效果展示：

源码展示：

!doctype html>
    
html>
    
head>
    
  meta charset="utf-8">
    
  title>
    canvas实现水球加载动画/title>
    
  style>

    body {
    
      display:flex;
    
      flex-flow:column wrap;
    
      justify-content:center;
    
      align-items:center;

    }

    #c {
    
      margin-top:20px;

    }

    input[type=range]::before {
    
      content:attr(min);
    
      color:#000;
    
      padding-right:5px;

    }

    input[type=range]::after {
    
      content:attr(max);
    
      color:#000;
    
      padding-left:5px;

    }
    
  /style>
    
/head>
    
body>
    
canvas id="c">
    当前浏览器不支持canvas 请升级！/canvas>
    
input type="range" name="range" min="0" max="100" step="1">
    

script>
    
  canvas = document.getelementbyid("c");
    
  ctx = canvas.getcontext("2d");
    
  orange = document.getelementsbyname("range")[0];
    

  m = math;
    
  sin = m.sin;
    
  cos = m.cos;
    
  sqrt = m.sqrt;
    
  pow = m.pow;
    
  pi = m.pi;
    
  round = m.round;
    

  ow = canvas.width = 300;
    
  oh = canvas.height = 300;
    

  // 线宽
  linewidth = 2

  // 大半径
  r = (ow / 2);
    
  cr = r - 8 * linewidth;
    

  ctx.beginpath();
    

  ctx.linewidth = linewidth;
    

  // 水波动画初始参数
  axislength = 2 * r - 16 * linewidth;
     // sin 图形长度
  unit = axislength / 8;
     // 波浪宽
  range = .2 // 浪幅
  nowrange = range;
    
  xoffset = 8 * linewidth;
     // x 轴偏移量
  data = ~~(orange.value) / 100;
     // 数据量
  sp = 0;
     // 周期偏移量
  nowdata = 0;
    
  waveupsp = 0.002;
     // 水波上涨速度

  // 圆动画初始参数
  arcstack = [];
     // 圆栈
  br = r - 8 * linewidth;
    
  soffset = -(pi / 2);
     // 圆动画起始位置
  circlelock = true;
     // 起始动画锁

  // 获取圆动画轨迹点集
  for (var i = soffset;
     i  soffset + 2 * pi;
 i += 1 / (8 * pi)) {

    arcstack.push([
      r + br * cos(i),
      r + br * sin(i)
    ])
  }
    

  cstartpoint = arcstack.shift();
     // 圆起始点

  ctx.strokestyle = "#1c86d1";
    
  ctx.moveto(cstartpoint[0], cstartpoint[1])

  render();
 // 开始渲染

  function drawsine() {
    
    ctx.beginpath();
    
    ctx.save();
    
    var stack = [];
     // 记录起始点和终点坐标
    for (var i = xoffset;
     i = xoffset + axislength;
 i += 20 / axislength) {
    
      var x = sp + (xoffset + i) / unit;
    
      var y = sin(x) * nowrange;
    

      var dx = i;
    

      var dy = 2 * cr * (1 - nowdata) + (r - cr) - (unit * y);
    

      ctx.lineto(dx, dy);

      stack.push([dx, dy])
    }
    

    // 获取初始点和结束点
    var startp = stack[0]
    var endp = stack[stack.length - 1]

    ctx.lineto(xoffset + axislength, ow);
    
    ctx.lineto(xoffset, ow);
    
    ctx.lineto(startp[0], startp[1])
    ctx.fillstyle = "#1c86d1";
    
    ctx.fill()
    ctx.restore();

  }


  function drawtext() {
    
    ctx.globalcompositeoperation = 'source-over';
    

    var size = 0.4 * cr;
    
    ctx.font = 'bold ' + size + 'px microsoft yahei';
    

    txt = (nowdata.tofixed(2) * 100).tofixed(0) + '%';
    

    var fonty = r + size / 2;
    
    var fontx = r - size * 0.8;
    
    ctx.fillstyle = "rgba(06, 85, 128, 0.8)";

    ctx.filltext(txt, fontx, fonty)
  }


  function render() {
    
    ctx.clearrect(0, 0, ow, oh);


    if (circlelock) {

      if (arcstack.length) {
    
        var temp = arcstack.shift();
    
        ctx.lineto(temp[0], temp[1])
        ctx.stroke();

      }
 else {
    
        circlelock = false;
    
        ctx.lineto(cstartpoint[0], cstartpoint[1])
        ctx.stroke();
    
        arcstack = null;
    

        ctx.globalcompositeoperation = 'destination-over';
    
        ctx.beginpath();
    
        ctx.linewidth = linewidth;
    
        ctx.arc(r, r, br, 0, 2 * pi, 1);
    

        ctx.beginpath();
    
        ctx.save();
    
        ctx.arc(r, r, r - 16 * linewidth, 0, 2 * pi, 1);
    
        ctx.restore()
        ctx.clip();
    

        ctx.fillstyle = "#1c86d1";


        // 初始拖拽控件
        orange.addeventlistener("change", function() {
    
          data = ~~(orange.value) / 100;

          console.log("data=" + data)
        }
    , 0);

      }

    }
 else {
    
      // 开始水波动画
      // 控制波幅
      if (data >
= 0.85) {
    
        if (nowrange >
 range / 4) {
    
          var t = range * 0.01;
    
          nowrange -= t;

        }

      }
 else if (data = 0.1) {

        if (nowrange  range * 1.5) {
    
          var t = range * 0.01;
    
          nowrange += t;

        }

      }
 else {

        if (nowrange = range) {
    
          var t = range * 0.01;
    
          nowrange += t;

        }
    

        if (nowrange >
= range) {
    
          var t = range * 0.01;
    
          nowrange -= t;

        }

      }
    

      if ((data - nowdata) >
 0) {
    
        nowdata += waveupsp;

      }


      if ((data - nowdata)  0) {

        nowdata -= waveupsp
      }
    

      sp += 0.07;
    
      drawsine();
    
      drawtext();

    }

    requestanimationframe(render)
  }
    
/script>
    
hr>
    

pre style="color:red">
    
感： 最近贡献一下我在教学中的小案例 希望能给你一些帮助 ,希望大家继续关注我的博客

                                       --王
/pre>
    

/body>
    
/html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！