janvas实现canvas波纹液体流动进度条效果代码-html代码-BFW代码库

janvas实现canvas波纹液体流动进度条效果代码

代码语言：html

所属分类：进度条

代码描述：janvas实现canvas波纹液体流动进度条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



<style>
    body{
        padding:50px;
    }
</style>



</head>

<body>
    <div id="app" style="width: 200px;height: 200px;"></div>

    <label for="range">Value</label><input id="range" type="range" min="0" max="100" value="50" step="1" />


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/janvas.js"></script>
    <script>
        function Wave(ctx, sx, sy, width, height, type, period, offset, amp, ox, oy) {
          janvas.Rect.call(this, ctx, sx, sy, width, height, ox, oy);
          this.type = type;
          this.period = period;
          this.offset = offset;
          this.amp = amp;
        }
        
        janvas.Utils.inheritPrototype(Wave, janvas.Rect);
        
        Wave.prototype.process = function () {
          var ctx = this.ctx, sx = this._left, sy = this._top, ex = this._right,
            type = this.type, period = this.period, offset = this.offset, amp = this.amp;
          ctx.beginPath();
          ctx.moveTo(sx, sy + type(offset) * amp);
          for (var i = sx; i < ex; i++) {
            ctx.lineTo(i, sy + type((i - sx) / (ex - sx) * period + offset) * amp);
          }
          ctx.lineTo(this._right, this._bottom);
          ctx.lineTo(sx, this._bottom);
          ctx.closePath();
        };
        
        var liquid = new janvas.Canvas({
          container: "#app",
          duration: Infinity,
          methods: {
            init: function () {
              var size = Math.min(this.$width, this.$height), cx = size / 2, cy = size / 2,
                innerRadius = size * 0.35, outerRadius = size * 0.45, color = "rgb(23, 139, 202)",
                clipRadius = this.clipRadius = innerRa.........完整代码请登录后点击上方下载按钮下载查看