用鼠标向下和移动事件绘制直线的问题

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在第二个画布上绘制最后一行，清除第一个画布。

太懒了创建第二个画布（它现在每次尝试都清除它）; 放置注释，通过不同的画布进行永久绘制

＆＃13;
＆＃13;
$(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;
    });
});
＆＃13;
#map{border:solid; margin-top: 50px;}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<canvas id="map"></canvas>
＆＃13;
＆＃13;
＆＃13;