var _clientwidth = document.body.clientWidth;
var _poolDia = _clientwidth / 2; //水池直徑
var canvas = document.getElementById("pool");
var waterSpaceHeight = _poolDia - canvas.dataset.progress * _poolDia / 100; //水池距離頂端有高度
//設定canvas的基本屬性
canvas.width = _clientwidth / 2;
canvas.height = _clientwidth / 2;
canvas.style.marginLeft = _poolDia / 2
 
 + "px";
canvas.style.borderRadius = _clientwidth / 2 + "px";
//獲取context物件
var context = canvas.getContext("2d");
//設定顏色   水的rgba
context.fillStyle = "rgba(212,242,231,.8)";
context.strokeStyle = "rgba(0,0,0,.8)"

//水的波動常量
var maxPY = Math.PI * 5; //最大偏移量
var indexPY = -maxPY; //起點偏移量  也就是說起點的X值偏移了多少 
var indexCH = _poolDia / (2
 
*Math.PI); //波的個數
var blHeight = _poolDia/60;   //波高
var speed = 0.5; //速度
var startX = 0; //繪製起點X 下同理
var startY = 0;
var currX = 0; //當前點X
var currY = 0;
var endX = 0;
var endY = 0;
//WaveMove();

//水的波動
function WaveMove() {
    context.clearRect(0, 0, _poolDia, _poolDia);
    context.beginPath();
    startX = 0;
    startY = waterSpaceHeight + Math
 
.sin(startX)*5;
    for (var i = 0; i < _poolDia-indexPY; i = i + 1) {
        currX = i;
        currY = Math.sin(currX/indexCH+indexPY)*blHeight   + waterSpaceHeight;
        context.lineTo(currX, currY);
    }

    context.lineTo(_poolDia, _poolDia);
    context.lineTo(startX,_poolDia);
    context.lineTo(startX,startY);
    context.fill();
    context.closePath();

    indexPY = indexPY + speed;
    if (indexPY >= -Math.PI) {
        indexPY = -maxPY;
    }
}

document.body.onload = function(){
    setInterval('WaveMove()', 100);
}

pool.html