{"code":"<canvas id=\"c\" ></canvas>\nchange water\n<input type=\"range\" id=\"r\" min=\"0\" max=\"100\" step=\"1\">\n    \n<style>\nbody{\n        position: relative;\n        margin: 0;\n    }\n    canvas{\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        margin-left: -150px;\n        margin-top: -150px;\n        border: 1px dashed rgba(0,0,0,0.1)\n    }\n</style>\n\n<script>\nvar canvas = document.getElementById('c');\nvar ctx = canvas.getContext('2d');\nvar range = document.getElementById('r');\n\n//range控件信息\nvar rangeValue = range.value;\nvar nowRange = 40;   //用于做一个临时的range\n\n//画布属性\nvar mW = canvas.width = 350;\nvar mH = canvas.height = 350;\nvar lineWidth = 1;\n\n//圆属性\nvar r = mH / 2; //圆心\nvar cR = r - 32 * lineWidth; //圆半径\n\n//Sin 曲线属性\nvar sX = 0;\nvar axisLength = mW; //轴长\nvar waveWidth = 0.008 ;   //波浪宽度,数越小越宽    \nvar waveHeight = 6; //波浪高度,数越大越高\nvar speed = 0.09; //波浪速度，数越大速度越快\nvar xOffset = 0; //波浪x偏移量\n\nctx.lineWidth = lineWidth;\n\n//画圈函数\nvar IsdrawCircled = false;\nvar drawCircle = function(){\n\n    ctx.beginPath();\n    ctx.strokeStyle = '#1080d0';\n    ctx.arc(r, r, cR+1, 0, 2 * Math.PI);\n    ctx.stroke();\n    ctx.beginPath();\n    ctx.arc(r, r, cR, 0, 2 * Math.PI);\n    ctx.clip();\n    IsdrawCircled = true;\n}\n\n//画sin 曲线函数\nvar drawSin = function(xOffset, color, waveHeight){\n    ctx.save();\n\n    var points=[];  //用于存放绘制Sin曲线的点\n\n    ctx.beginPath();\n    //在整个轴长上取点\n    for(var x = sX; x < sX + axisLength; x += 20 / axisLength){\n        //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”\n        var y = Math.sin((-sX - x) * waveWidth + xOffset) * 0.8 + 0.1;\n\n        var dY = mH * (1 - nowRange / 100 );\n\n        points.push([x, dY + y * waveHeight]);\n        ctx.lineTo(x, dY + y * waveHeight);     \n    }\n\n    //封闭路径\n    ctx.lineTo(axisLength, mH);\n    ctx.lineTo(sX, mH);\n    ctx.lineTo(points[0][0],points[0][1]);\n    ctx.fillStyle = color;\n    ctx.fill();\n\n    ctx.restore();\n};\n\nvar render = function(){\n    ctx.clearRect(0, 0, mW, mH);\n\n    rangeValue = range.value;\n\n    if(IsdrawCircled == false){\n        drawCircle();   \n    }\n\n    if(nowRange <= rangeValue){\n        var tmp = 1;\n        nowRange += tmp;\n    }\n\n    if(nowRange > rangeValue){\n        var tmp = 1;\n        nowRange -= tmp;\n    }\n\n    drawSin(xOffset+Math.PI*0.7, 'rgba(28, 134, 209, 0.5)', 18);\n    drawSin(xOffset, '#1c86d1', 18);\n    drawText(); \n\n    xOffset += speed;\n    requestAnimationFrame(render);\n}\n//写百分比文本函数\nvar drawText = function(){\n    ctx.save();\n\n    var size = 0.4*cR;\n    ctx.font = size + 'px Microsoft Yahei';\n    ctx.textAlign = 'center';\n    ctx.fillStyle = \"rgba(06, 85, 128, 0.5)\";\n    ctx.fillText(~~nowRange + '%', r, r + size / 2);\n\n    ctx.restore();\n};\n\nrender();\n\n</script> \n\n"}