wave

wave.js

export default ()=>{
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");

  let _w = window.window.innerWidth
  let _h = window.innerHeight

  c.setAttribute('width',_w)
  c.setAttribute('height',_h)

  ctx.width = _w
  ctx.height = _h

  let begin = Date.now()
  const duration = 2000

  const _unit = 100
  const start = 151

  const draw = (cx,cy)=>{
    // console.log("aa")
    ctx.clearRect(0, 0, _w, _h)
    ctx.beginPath()
    ctx.fillStyle = "#cc0000"
    // ctx.fillRect(cx, 100*Math.cos(cy*Math.PI/180), 200, 200)
    ctx.strokeRect(1, 1, _w, 200);

    ctx.beginPath();
    ctx.lineWidth=2;
    ctx.moveTo(1, start);
    let now = Date.now()
    const sa = (now - begin)/5
    for (var i = 0; i <= _w; i++) {
      // console.log(Math.cos(i*(Math.PI*2/_w)))
      ctx.lineTo(i, start - _unit  * .5 * Math.cos((i+sa)*(Math.PI*2/_w)));
    }
    ctx.lineTo(_w + 10, _h);
    ctx.lineTo(0, _h);
    ctx.closePath()
    ctx.fill();
  }

  draw(0,0)

  var frame = 0;

  function wave() {
    requestAnimationFrame(wave);

    frame++;
    if(frame % 2 == 0) { return; }
    draw(0,0)
  }

  wave();

}