Canvas 梯形水池

**HTML的 canvas 水位图 **
*

利用正弦函数做出波浪

function init(height,width,xOffset,speed,rangeValue,nowRange) {
    this.canvas=document.querySelector('#wave');
    this.canvas.height = height;
    this.canvas.width = width;
    this.ctx = this.canvas.getContext('2d');
    this.xOffset = xOffset;  // 初始偏移
    this.speed = speed;  // 偏移速度
    this.isDrawCircle=false;//画圆
    this.rangeValue = rangeValue;
    // 初始水位
    this.nowRange = nowRange;
    this.drawSin=drawSin;
    this.drawCircle=drawCircle;
    this.draw=draw;
    requestAnimationFrame(this.draw.bind(this));
  }
  function drawSin() {
    const points = [];
    const canvasWidth = this.canvas.width;
    const canvasHeight = this.canvas.height;
    const startX = 0;
    const waveWidth = 0.1; // 波浪宽度,数越小越宽
    const waveHeight = 10; // 波浪高度,数越大越高
    // const xOffset = 0; // 水平位移
    this.ctx.beg