跟随鼠标光标画布画线答案

【问题标题】：canvas draw line by following mouse cursor跟随鼠标光标画布画线
【发布时间】：2019-12-29 14:06:54
【问题描述】：

这就是我通过按下/释放鼠标按钮在画布中绘制线条的方式。但这并不完全是我试图得到的：通过按下鼠标按钮，直线的起点正在设置，终点将跟随鼠标光标。但这条线应该始终是一条直线——而不是像现在这样画一些曲线。通过释放鼠标按钮，线条完成/固定。

这样，用户应该能够以任何方向/旋转在画布上的任何位置绘制直线。按鼠标键为起点，松开鼠标为直线的终点。

$(function() {
  var letsdraw = false;

  var theCanvas = document.getElementById('paint');
  var ctx = theCanvas.getContext('2d');
  theCanvas.width = 420;
  theCanvas.height = 300;

  var canvasOffset = $('#paint').offset();

  $('#paint').mousemove(function(e) {
    if (letsdraw === true) {
      ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
      ctx.stroke();
    }
  });

  $('#paint').mousedown(function() {
    letsdraw = true;
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
  });

  $(window).mouseup(function() {
    letsdraw = false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="paint"></canvas>

【问题讨论】：

标签： javascript jquery canvas

【解决方案1】：

如果你想修改它，你需要擦除画布上的内容
（使用ctx.clearRect()）；

看看这个：

$(function() {
  var letsdraw ;

  var theCanvas = document.getElementById('paint');
  var ctx = theCanvas.getContext('2d');
  theCanvas.width = 420;
  theCanvas.height = 300;

  var canvasOffset = $('#paint').offset();

  $('#paint').mousemove(function(e) {
    if (letsdraw) {
      ctx.clearRect(0,0,theCanvas.width,theCanvas.height);
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 1;
      ctx.beginPath();
    
      ctx.moveTo(letsdraw.x, letsdraw.y);
      ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
      ctx.stroke();
    }
  });

  $('#paint').mousedown(function(e) {
    letsdraw = {
      x:e.pageX - canvasOffset.left,
      y:e.pageY - canvasOffset.top
      }
    
  });

  $(window).mouseup(function() {
    letsdraw = null;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="paint"></canvas>

【讨论】：

近乎完美：当然我想保留完成的画线。用户应该能够使用此方法绘制三条线。
那么您需要跟踪您想要保留的绘制线条并在每次鼠标移动时重新绘制它们

【解决方案2】：

你应该这样做。

$(function() {
  var letsdraw = false;
  var theCanvas = document.getElementById('paint');
  var ctx = theCanvas.getContext('2d');
  theCanvas.width = 420;
  theCanvas.height = 300;
  var canvasOffset = $('#paint').offset();
  var lastpoints = {
    "x": 0,
    "y": 0
  };

  $('#paint').mousemove(function(e) {
    if (letsdraw === true) {
      lastpoints.x = e.pageX;
      lastpoints.y = e.pageY;
    }
  });

  $('#paint').mousedown(function(e) {
    letsdraw = true;
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
  });

  $('#paint').mouseup(function(e) {
    ctx.lineTo(lastpoints.x - canvasOffset.left, lastpoints.y - canvasOffset.top);
    ctx.stroke();
    letsdraw = false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="paint"></canvas>

【讨论】：