鼠标向下拖动绘制直线时的问题并移动事件

Question

您可以看看下面的演示，并让我知道如何让代码在画布上绘制100％直线？

$(function() { 
 
    var drawLine = false; 
 

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

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

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

 
    $('#map').mousedown(function() { 
 
     drawLine = true; 
 
     ctx.strokeStyle = 'blue'; 
 
     ctx.lineWidth = 5; 
 
     ctx.lineCap = 'round'; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top); 
 
    }); 
 

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

#map{border:solid; margin-top: 50px;}

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

正如你可以看到代码工作正常，但我要的是画直线上绘制

感谢

Answer 1

你需要有2个画布：

1. 临时动画
2. 永久存储图纸。

算法：

1. ondown写入开始坐标。
2. onmove记录终结点，清除画布1，在画布1上从起点到终点绘制一条线。
3. onup在第二个画布上画最后一行清除第一个画布。

太懒了创建第二个画布（它会立即清除它现在）; 加注释，其中永久传递不同的帆布画

$(function() { 
 
    var drawLine = false; 
 

 
    var theCanvas = document.getElementById('map'); 
 
    var finalPos = {x:0, y:0}; 
 
    var startPos = {x:0, y:0}; 
 
    var ctx = theCanvas.getContext('2d'); 
 
    theCanvas.width = 420; 
 
    theCanvas.height = 300; 
 

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

 
    function line(cnvs) { 
 
     cnvs.beginPath(); 
 
     cnvs.moveTo(startPos.x, startPos.y); 
 
     cnvs.lineTo(finalPos.x, finalPos.y); 
 
     cnvs.stroke(); 
 
    } 
 

 
    function clearCanvas() 
 
    { 
 
     ctx.clearRect(0, 0, theCanvas.width, theCanvas.height); 
 
    } 
 

 
    $('#map').mousemove(function(e) { 
 
     if (drawLine === true) { 
 
      finalPos = {x: e.pageX - canvasOffset.left, y:e.pageY - canvasOffset.top}; 
 

 
      clearCanvas(); 
 
      line(ctx); 
 
      
 
     } 
 
    }); 
 

 
    $('#map').mousedown(function(e) { 
 
     drawLine = true; 
 
     ctx.strokeStyle = 'blue'; 
 
     ctx.lineWidth = 5; 
 
     ctx.lineCap = 'round'; 
 
     ctx.beginPath(); 
 
     startPos = { x: e.pageX - canvasOffset.left, y: e.pageY - canvasOffset.top}; 
 
    }); 
 

 
    $(window).mouseup(function() { 
 
     clearCanvas(); 
 
     // Replace with var that is second canvas 
 
     line(ctx); 
 
     finalPos = {x:0, y:0}; 
 
     startPos = {x:0, y:0}; 
 
     drawLine = false; 
 
    }); 
 
});

#map{border:solid; margin-top: 50px;}

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