canvas根据点绘制多边形

const canvas = {
  ctx: null,
  arr: [],
  isTrue: true,
  draw: (canvasEl) => {
    canvas.arr = [];
    canvas.ctx = canvasEl.getContext("2d");
    canvasEl.onclick = (ev) => {
      if (!canvas.isTrue) {
        return;
      }
      if (canvas.arr.length > 1) {
        if (
          ev.offsetX <= canvas.arr[0].x + 10 &&
          ev.offsetX >= canvas.arr[0].x - 10 &&
          ev.offsetY <= canvas.arr[0].y + 10 &&
          ev.offsetY >= canvas.arr[0].y - 10
        ) {
          canvas.arr.push({
            x: canvas.arr[0].x,
            y: canvas.arr[0].y,
            circle: false,
          });
        } else {
          canvas.arr.push({
            x: ev.offsetX,
            y: ev.offsetY,
            circle: true,
          });
        }
      } else {
        canvas.arr.push({
          x: ev.offsetX,
          y: ev.offsetY,
          circle: true,
        });
      }
      canvas.ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
      canvas.arr.forEach((el, index) => {
        canvas.ctx.beginPath();
        if (el.circle) {
          canvas.ctx.arc(el.x, el.y, 3, 0, Math.PI * 2, true);
        }
        canvas.ctx.fillStyle = "rgba(237, 241, 192)";
        canvas.ctx.fill();
      });
      canvas.ctx.beginPath();
      canvas.arr.forEach((el, index) => {
        if (index == 0) {
          canvas.ctx.moveTo(el.x, el.y);
        } else {
          canvas.ctx.lineTo(el.x, el.y);
        }
      });
      canvas.ctx.fillStyle = "rgba(237, 241, 192,0.5)";
      canvas.ctx.strokeStyle = "#fff100";
      canvas.ctx.stroke();
      if (canvas.arr.length > 1) {
        if (
          canvas.arr[canvas.arr.length - 1].x <= canvas.arr[0].x + 10 &&
          canvas.arr[canvas.arr.length - 1].x >= canvas.arr[0].x - 10 &&
          canvas.arr[canvas.arr.length - 1].y <= canvas.arr[0].y + 10 &&
          canvas.arr[canvas.arr.length - 1].y >= canvas.arr[0].y - 10
        ) {
          canvas.ctx.fill();
          canvas.isTrue = false;
        }
      }
    };
  },
  clearDraw(canvasEl) {
    canvas.arr = [];
    canvas.isTrue = true;
    if (canvas.ctx) {
      canvas.ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
    }
  }
}
export default canvas
//直接引入调用draw方法传入元素就可以在元素中绘制了