<!--
 * canvas学习-正弦曲线
  -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const transX = ref(-900);
const transY = ref(0);
onMounted(() => {
  sineCurve();
});

// 正弦曲线
function sineCurve() {
  let canvas: any = document.getElementById('canvas');
  let pen = canvas.getContext('2d');

  let canvas2: any = document.getElementById('canvas2');
  let pen2 = canvas2.getContext('2d');

  pen2.save();
  pen2.beginPath();
  pen2.beginPath();
  // drawGrid('green', 1200, 600, pen2);
  pen2.restore();

  // const width = 600; // canvas宽
  // const angle = 30; // 角度值
  // const arc = (angle * Math.PI) / 180; // 弧度值
  // 中心点坐标
  // const center = {
  //   x: 300,
  //   y: 300,
  // };

  // 绘制网格
  function drawGrid(color: string, w: number, h: number, pen: any) {
    const step = 100;
    const w_l = w / step;
    const h_l = h / step;

    // 横着的线
    for (let i = 0; i <= h_l; i++) {
      pen.beginPath();
      pen.strokeStyle = color;
      pen.moveTo(0, i * step);
      pen.lineTo(w, i * step);
      pen.stroke();
    }
    // 竖着的线
    for (let i = 0; i <= w_l; i++) {
      pen.beginPath();
      pen.moveTo(i * step, 0);
      pen.lineTo(i * step, h);
      pen.stroke();
    }
  }
  pen.save();
  drawGrid('#ca3e47', 1200, 600, pen);
  pen.restore();

  // 正弦曲线
  // 圆心坐标
  const center = {
    x: 100,
    y: 300,
  };
  const r = 100; // 半径
  pen.save();
  pen.beginPath();
  pen.arc(center.x, center.y, r, 0, 2 * Math.PI);
  pen.strokeStyle = '#ffb549';
  pen.stroke();
  // 指示线
  pen.beginPath();
  pen.moveTo(center.x, center.y);
  pen.lineTo(2 * r, center.y);
  pen.lineWidth = 2;
  pen.stroke();
  pen.restore();

  // 画圆弧
  function drawArc(arc: number) {
    pen.save();
    pen.beginPath();
    const a_side1 = Math.sin(arc) * r;
    const b_side1 = Math.cos(arc) * r;
    const x1 = center.x + b_side1;
    const y1 = center.y + a_side1;
    pen.restore();

    pen.save();
    pen.beginPath();
    pen.moveTo(x1, y1);
    pen.lineTo(300, y1);
    pen.strokeStyle = 'blue';
    pen.stroke();
    pen.restore();

    // 正弦点
    pen2.beginPath();
    pen2.arc(300 - transX.value, y1, 10, 0, 2 * Math.PI);
    pen2.stroke();

    // 移动
    transX.value += 10;

    // 能够显示的区域长度
    const zoneLenth = 200;
    // (0-900)是初始的transX.value
    const sideP = 0 - 900 + zoneLenth;
    if (transX.value > sideP) {
      const lens1 = transX.value - sideP;
      // 1200是pen2画布的宽度
      const clearX = 1200 - lens1;
      // 600是pen2画布的高度
      pen2.clearRect(clearX, 0, lens1, 600);
    }

    return {
      x: x1,
      y: y1,
    };
  }

  // let i = 24;
  // setInterval(() => {
  //   if (i < 0) {
  //     i = 23;
  //   }
  //   drawArc((i * 15 * Math.PI) / 180);
  //   i--;
  //   if (transX.value > 300) {
  //     transX.value = 0;
  //     pen2.clearRect(0, 0, 1200, 600);
  //   }
  // }, 1000);

  drawArc((360 * Math.PI) / 180);
  drawArc((345 * Math.PI) / 180);
  drawArc((330 * Math.PI) / 180);
  drawArc((315 * Math.PI) / 180);
  drawArc((300 * Math.PI) / 180);
  // drawArc((285 * Math.PI) / 180);
  // drawArc((270 * Math.PI) / 180);
  // drawArc((255 * Math.PI) / 180);
  // drawArc((240 * Math.PI) / 180);
  // drawArc((225 * Math.PI) / 180);
  // drawArc((210 * Math.PI) / 180);
  // drawArc((195 * Math.PI) / 180);
  // drawArc((180 * Math.PI) / 180);
  // drawArc((165 * Math.PI) / 180);
  // drawArc((150 * Math.PI) / 180);
  // drawArc((135 * Math.PI) / 180);
  // drawArc((120 * Math.PI) / 180);
  // drawArc((105 * Math.PI) / 180);
  // drawArc((90 * Math.PI) / 180);
  // drawArc((75 * Math.PI) / 180);
  // drawArc((60 * Math.PI) / 180);
  // drawArc((45 * Math.PI) / 180);
  // drawArc((30 * Math.PI) / 180);
  // drawArc((15 * Math.PI) / 180);
  // drawArc((0 * Math.PI) / 180);

  // drawArc((345 * Math.PI) / 180);
  // drawArc((330 * Math.PI) / 180);
  // drawArc((315 * Math.PI) / 180);
  // drawArc((300 * Math.PI) / 180);
  // drawArc((285 * Math.PI) / 180);
}
</script>
<template>
  <div class="fit">
    <div>canvas</div>

    <div class="relative-position">
      <canvas
        id="canvas"
        width="1200"
        height="600"
        style="border: 1px solid red; position: absolute; top: 0; left: 0"
      ></canvas>
      <canvas
        id="canvas2"
        width="1200"
        height="600"
        :style="{
          border: '1px solid green',
          position: 'absolute',
          top: 0,
          left: 0,
          transform: `translate(${transX}px, ${transY}px)`,
        }"
      ></canvas>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  transform: translate(100px, 100px);
}
</style>
