js使用canvas实现绘制月饼

    <div class="banner">
      <canvas id="canvas" width="500" height="500"> </canvas>
      <div class="basebg"> </div>
      <img src="./bg.png" alt="" class="bg">
      <img src="./sc1.png" alt="" class="sc1">
      <div class="text">———— 但愿人长久，千里共婵娟 ————</div>
      <div class="btn">
        <div class="model" onclick="model(1)">单笔</div>
        <div class="model" onclick="model(8)">对称</div>
        <div class="reset" onclick="reset()">清空画布</div>
      </div>
    </div>

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  let point = {};
  let lineNum = 8;
  let isDrawing = false;
  canvas.addEventListener('pointerdown', (e) => {
    isDrawing = true;
  });
  canvas.addEventListener('pointermove', (e) => {
    if (!isDrawing) return;
    const x = e.clientX - canvas.getBoundingClientRect().left
    const y = e.clientY - canvas.getBoundingClientRect().top
    point.x1 = x;
    point.y1 = y;
    draw(ctx, "#fdbb07", 5);
    point.x2 = x;
    point.y2 = y;
  });
  canvas.addEventListener('pointerup', (e) => {
    isDrawing = false;
  });

e.touches[0].clientX
e.touches[0].clientY

  function draw(canvas, color, lineWidth) {
    canvas.strokeStyle = color;
    canvas.lineWidth = lineWidth;
    canvas.lineCap = "round";
    canvas.moveTo(point.x1, point.y1);
    canvas.lineTo(point.x2, point.y2);
    canvas.stroke();
  }

  function draw(canvas, color, lineWidth) {
    canvas.strokeStyle = color;
    canvas.lineWidth = lineWidth;
    canvas.lineCap = "round";
    var r = 360 / lineNum * Math.PI / 180;
    for (let i = 0; i < lineNum; i++) {
      canvas.save();
      canvas.translate(width / 2, height / 2);
      canvas.rotate(r * i);
      canvas.beginPath();
      canvas.moveTo(point.x1 - width / 2, point.y1 - height / 2);
      canvas.lineTo(point.x2 - width / 2, point.y2 - height / 2);
      canvas.stroke();
      canvas.restore();
    }
  }