使用鼠标事件从一个点画线到另一个点

Question

如何使用 HTML5 画布用鼠标简单地将两个点连接到一条线？我会点击第一个点并拖动鼠标创建一条线，直到它连接到第二个点。 我一直在使用 x/y 偏移量来跟随鼠标，但画一条线是我需要帮助的地方。

数据数组是两个点

$scope.data = [
     [192,27]
    ,[183,55]
  ];


  function drawDot(event) {
      if(dragging){

            context.lineTo(event.offsetX, event.offsetY);
            context.stroke();
            context.beginPath();
            context.arc(event.offsetX, event.offsetY,5, 0, Math.PI*2);
            context.fill();
            context.beginPath();
            context.moveTo(event.offsetX, event.offsetY);

        }
    }

  function engage(){
      dragging = true;
      drawDot(event);
  }

  function disengage(){
      dragging = false;
      context.beginPath(); 
  }

function init(){
    canvas.addEventListener("mousedown",engage);
    canvas.addEventListener("mouseup",disengage);
    canvas.addEventListener("mousemove",drawDot,false);
}

Answer 1

我在这里看到了一些问题。看看我的例子。我相信这就是您正在寻找的。​​p>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")


var startX = 0;
var startY = 0;

  function drawDot(event) {
      if(dragging){
      context.clearRect(0,0,canvas.width, canvas.height)
      context.beginPath();
      context.moveTo(startX, startY);
      context.lineTo(event.offsetX, event.offsetY);
       context.arc(event.offsetX, event.offsetY,5, 0, Math.PI*2);
      context.stroke();
      context.closePath();
        }
    }

  function engage(event){
      dragging = true;
      startX = event.offsetX;
      startY = event.offsetY;
  }

  function disengage(){
      dragging = false;
  }


canvas.addEventListener("mousedown",engage);
canvas.addEventListener("mouseup",disengage);
canvas.addEventListener("mousemove",drawDot,false);

<canvas id="canvas" style="margin: 10px; background: blue"></canvas>