JavaScript 实现在画布上画直线

发布时间:2023-05-07 18:14:49    发布者:文昌文城莱奥网络技术工作室    浏览次数:361

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 实现在画布上画直线</title>
</head>
<body>
  <canvas id="my-canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>

  <script>
    const canvas = document.getElementById('my-canvas');
    const context = canvas.getContext('2d');
    let isMouseDown = false;
    let startX = 0;
    let startY = 0;
    let endX = 0;
    let endY = 0;

    canvas.addEventListener('mousedown', function(event) {
      isMouseDown = true;
      startX = event.offsetX;
      startY = event.offsetY;
    });

    canvas.addEventListener('mouseup', function(event) {
      isMouseDown = false;
      endX = event.offsetX;
      endY = event.offsetY;
      context.beginPath();
      context.moveTo(startX, startY);
      context.lineTo(endX, endY);
      context.stroke();
    });
  </script>
</body>
</html>