**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