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

我在这看到一些错误。看看我的例子。我相信这就是你要找的东西。

＆＃13;

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);

＆＃13;

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

＆＃13;

使用鼠标事件从一个点到另一个点绘制线条

1 个答案: