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.........完整代码请登录后点击上方下载按钮下载查看