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

change water

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

<style>

body{

        position: relative;

        margin: 0;

    }

    canvas{

        position: absolute;

        left: 0%;

        top: 30%;

        margin-left: 00px;

        margin-top: -10%;

        border: 1px dashed rgba(0,0,0,0.1)

    }

</style>

​

<script>

var canvas = document.getElementById('c');

var ctx = canvas.getContext('2d');

var range = document.getElementById('r');

​

//range控件信息

var rangeValue = range.value;

var nowRange = 40;   //用于做一个临时的range

​

//画布属性

var mW = canvas.width = 500;

var mH = canvas.height = 100;

var lineWidth = 1;

​

//圆属性

var r = mH / 2; //圆心

var cR = r - 32 * lineWidth; //圆半径

​

//Sin 曲线属性

var sX = 0;

var axisLength = mW; //轴长

var waveWidth = 0.008 ;   //波浪宽度,数越小越宽    

var waveHeight = 6; //波浪高度,数越大越高

var speed = 0.1; //波浪速度，数越大速度越快

var xOffset = 0; //波浪x偏移量

​

ctx.lineWidth = lineWidth;

​

//画圈函数

var IsdrawCircled = false;

var drawCircle = function(){

​

 //   ctx.beginPath();

    ctx.strokeStyle = '#1080d0';

 //   ctx.arc(r, r, cR+1, 0, 2 * Math.PI);

//    ctx.stroke();

//    ctx.beginPath();

//    ctx.arc(r, r, cR, 0, 2 * Math.PI);

ctx.rect(0,0,500,200);

ctx.clip();

    IsdrawCircled = true;

}

​

//画sin 曲线函数

var drawSin = function(xOffset, color, waveHeight){

    ctx.save();

​

    var points=[];  //用于存放绘制Sin曲线的点

​

    ctx.beginPath();

    //在整个轴长上取点

    for(var x = sX; x < sX + axisLength; x += 20 / axisLength){

        //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”

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

​

        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.lineTo(points[0][0],points[0][1]);

    ctx.fillStyle = color;

    ctx.fill();

​

    ctx.restore();

};

​

var render = function(){

    ctx.clearRect(0, 0, mW, mH);

​

    rangeValue = range.value;

​

    if(IsdrawCircled == false){

        drawCircle();   

    }

​

    if(nowRange <= rangeValue){

        var tmp = 1;

        nowRange += tmp;

    }

​

    if(nowRange > rangeValue){

        var tmp = 1;

        nowRange -= tmp;

    }

​

    drawSin(xOffset+Math.PI*0.7, 'rgba(28, 134, 209, 0.5)', 18);

    drawSin(xOffset, '#1c86d1', 18);

    drawText(); 

​

    xOffset += speed;

    requestAnimationFrame(render);

}

//写百分比文本函数

var drawText = function(){

    ctx.save();

​

    var size = 20;

    ctx.font = size + 'px Microsoft Yahei';

    ctx.textAlign = 'center';

    ctx.fillStyle = "rgba(06, 85, 128, 0.5)";

    ctx.fillText(~~nowRange + '%', r, r + size / 2);

​

    ctx.restore();

};

​

render();

​

</script> 

​

​