canvas线格图形,可移动-JZTXT

效果图片
　　　　　　其中的小圆可以移动
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #canvas {
        box-shadow: 0 0 5px #ccc;
        border-radius: 10px;
      }
      .cs {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="cs">
      <canvas id="canvas" width="600" height="300"></canvas>
    </div>
  </body>
  <script>
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    var set = {
      point: {
        x: 100,
        y: 100,
        r: 5,
      },
      ePoint: null,
    };

    // 绘制表格
    function drawCell() {
      for (var i = 0; i < 141; i++) {
        ctx.beginPath();
        ctx.moveTo(20 + 4 * i + 0.5, 20);
        ctx.lineTo(20 + 4 * i + 0.5, 280);
        if (i % 5 == 0) {
          ctx.lineWidth = 1;
          ctx.strokeStyle = "red";
        } else {
          ctx.lineWidth = 0.5;
          ctx.strokeStyle = "red";
        }
        ctx.stroke();
      }

      for (var i = 0; i < 66; i++) {
        ctx.beginPath();
        ctx.moveTo(20, 20 + 4 * i + 0.5);
        ctx.lineTo(580, 20 + 4 * i + 0.5);
        if (i % 5 == 0) {
          ctx.lineWidth = 1;
          ctx.strokeStyle = "red";
        } else {
          ctx.lineWidth = 0.5;
          ctx.strokeStyle = "red";
        }
        ctx.stroke();
      }
    }

    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function drawBall() {
      const { point } = set;
      ctx.beginPath();
      ctx.arc(point.x, point.y, point.r, 0, Math.PI * 2);
      ctx.strokeStyle = "#000";
      ctx.stroke();
    }

    function DragStart(e) {
      const { point } = set;
      const obj = filterPoint(e);
      if (
        obj.x - point.r < point.x &&
        obj.x + point.r > point.x &&
        obj.y - point.r < point.y &&
        obj.y + point.r > point.y
      ) {
        canvas.style.cursor = "move";
        set.ePoint = e;
      }
    }

    function Dragging(e) {
      const { point, ePoint } = set;
      if (
        ePoint &&
        point.x >= 20 &&
        point.y >= 20 &&
        point.x <= 580 &&
        point.y <= 280
      ) {
        point.x += e.pageX - ePoint.pageX;
        point.y += e.pageY - ePoint.pageY;
        if (point.x < 20) {
          point.x = 20;
        }
        if (point.y < 20) {
          point.y = 20;
        }
        if (point.x > 580) {
          point.x = 580;
        }
        if (point.y > 280) {
          point.y = 280;
        }
        set.ePoint = e;
        clearCanvas();
        drawCell();
        drawBall();
      }
    }

    function DragEnd(e) {
      canvas.style.cursor = "default";
      set.ePoint = null;
      clearCanvas();
      drawCell();
      drawBall();
    }

    function filterPoint(e) {
      const top = canvas.offsetTop;
      const left = canvas.offsetLeft;
      return {
        x: e.pageX - left,
        y: e.pageY - top,
      };
    }

    function init() {
      clearCanvas();
      drawCell();
      drawBall();
      canvas.onmousedown = DragStart;
      canvas.onmousemove = Dragging;
      canvas.onmouseup = canvas.onmouseout = DragEnd;
    }

    init();
  </script>
</html>