canves 实现波浪百分比控制

canves 实现波浪百分比控制

• 业务需要绘制一个可控制的百分比波浪
• 于是简单封装一下，入参和相关调用
• 

var ele =wavesurRecord({
        element, // 插入的元素，可以是元素，或者id
        percentage = 0, // 海浪百分比
        waveWidth= 0.008, //海浪高度
        speed = 0.02, //数值越大速率越快
        xofspeed = 0, //波浪横向的偏移量
        strokeStyle="#007c29", //贝塞尔曲线样式设置 
        fillStyle="#007c29", //贝塞尔曲线样式设置
 })
 ele.getCanves() // 获取该实例
 ele.setSpeed() // 设置速度
 ele.setPercentage() // 设置当前波浪的进度0-1

主函数代码

function wavesurRecord({
        element, // 插入的元素，可以是元素，或者id
        percentage = 0, // 海浪百分比
        waveWidth= 0.008, //海浪高度
        speed = 0.02, //数值越大速率越快
        xofspeed = 0, //波浪横向的偏移量
        strokeStyle="#007c29", //贝塞尔曲线样式设置 
        fillStyle="#007c29", //贝塞尔曲线样式设置
      }) {
        console.log(element,typeof element);
        //获取画布
        var beisizer = typeof element === 'object' ? element : document.getElementById("progress");
        var ContenofBeisizer = beisizer.getContext("2d"); //设置波浪海域（海浪宽度，高度）
        var beisizerwidth = beisizer.width;
        var beisizerheight = beisizer.height;
        var beisizerlinewidth = 2; //曲线
        var sinX = 0;
        var sinY = beisizerheight / 2.0; //轴长
        sinY = percentage
          ? beisizer.height * (1 - percentage)
          : beisizer.height + 10;
        var axisLenght = beisizerwidth; //弧度宽度
        var waveHeight = beisizerheight / 15.0;
        var rand = beisizerheight; //波浪高度
        ContenofBeisizer.lineWidth = beisizerlinewidth;
        // 创建静态的曲线
        var drawSin = function (xofspeed) {
          ContenofBeisizer.save(); //存放贝塞尔曲线的各个点
          var points = [];
          ContenofBeisizer.beginPath(); //创建贝塞尔点
          for (var x = sinX; x < sinX + axisLenght; x += 80 / axisLenght) {
            // var y = -Math.sin((sinX + x) * waveWidth);  //测试请解开注释，注释下一行
            var y = -Math.sin((sinX + x) * waveWidth + xofspeed);
            // points.push([x, sinY + y * waveHeight]); //测试请解开注释，注释下一行
            points.push([x, rand + y * waveHeight]);
            ContenofBeisizer.lineTo(x, sinY + y * waveHeight); //测试请解开注释，注释下一行
            // ContenofBeisizer.lineTo(x, rand + y * waveHeight);
          }
          ContenofBeisizer.lineTo(axisLenght, beisizerheight);
          ContenofBeisizer.lineTo(sinX, beisizerheight);
          ContenofBeisizer.lineTo(points[0][0], points[0][1]);
          ContenofBeisizer.stroke();
          ContenofBeisizer.restore(); //贝塞尔曲线样式设置
          ContenofBeisizer.strokeStyle =strokeStyle;
          ContenofBeisizer.fillStyle = fillStyle;
          ContenofBeisizer.fill();
        };
        var rendY = function () {
          ContenofBeisizer.clearRect(0, 0, beisizerwidth, beisizerheight); //控制海浪高度
          var tmp = 0.1;
          rand -= tmp;
          var b = beisizerheight - rand;
          //控制循环涨潮
          if (parseInt(b) == beisizerheight) {
            rand = beisizerheight;
          }
          drawSin(xofspeed);
          xofspeed += speed;
          requestAnimationFrame(rendY);
        };
        // 动态
        drawSin();
        rendY();
        return {
          getCanves:()=>ContenofBeisizer,
          setSpeed:(val)=>speed=val,
          setPercentage: (val) =>
            val
              ? (sinY = beisizer.height * (1 - val))
              : (sinY = beisizer.height + 10),
        };
      }