畫布通過鼠標光標繪製線條

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>

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