画布通过跟随鼠标光标绘制线条

Question

这是我通过按下/释放鼠标按钮在画布中绘制线条的方式.但这并不是我想要得到的:通过按下鼠标按钮,直线的起点将被设置,终点将跟随鼠标光标.但是这条线应该总是一条直线 - 而不是绘制一些曲线,就像现在这样做.通过释放鼠标按钮,线完成/固定.

使用它应该能够在画布上的任何位置绘制直线,任何方向/旋转.按下鼠标按钮作为起点并释放直线终点.

$(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>

Answer 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>