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

这就是我如何通过按下/释放鼠标按钮在画布上画一条线。但这并不完全是我想要得到的：通过按下鼠标按钮，直线的起点已经设置好，终点将跟随鼠标光标。但这条线应该永远是一条直线，而不是像现在这样画一些曲线。通过释放鼠标按钮，线路完成/固定

有了它，使用者应该能够在画布上的任何位置以任何方向/旋转绘制直线。按鼠标键表示起点，松开鼠标键表示直线终点

$（函数（）{
var letsdraw=假；
var theCanvas=document.getElementById（'paint'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=420；
canvas.height=300；
var canvasOffset=$（'#paint'）.offset（）；
$（'#paint'）.mousemove（函数（e）{
如果（letsdraw==真）{
ctx.lineTo（e.pageX-canvasOffset.left，e.pageY-canvasOffset.top）；
ctx.stroke（）；
}
});
$（“#绘制”）.mousedown（函数（）{
letsdraw=真；
ctx.strokeStyle='蓝色'；
ctx.lineWidth=1；
ctx.beginPath（）；
ctx.moveTo（e.pageX-canvasOffset.left，e.pageY-canvasOffset.top）；
});
$（窗口）.mouseup（函数（）{
letsdraw=假；
});
});
如果要修改画布上的内容，则需要在画布绘制后擦除画布上的内容
（使用）

看看这个：


$（函数（）{
var letsdraw；
var theCanvas=document.getElementById（'paint'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=420；
canvas.height=300；
var canvasOffset=$（'#paint'）.offset（）；
$（'#paint'）.mousemove（函数（e）{
如果（出租）{
ctx.clearRect（0,0，扫描宽度，扫描高度）；
ctx.strokeStyle='蓝色'；
ctx.lineWidth=1；
ctx.beginPath（）；
ctx.moveTo（letsdraw.x，letsdraw.y）；
ctx.lineTo（e.pageX-canvasOffset.left，e.pageY-canvasOffset.top）；
ctx.stroke（）；
}
});
$（“#绘制”）.mousedown（函数（e）{
letsdraw={
x:e.pageX-canvasOffset.left，
y:e.pageY-canvasOffset.top
}
});
$（窗口）.mouseup（函数（）{
letsdraw=null；
});
});
您应该这样做


$（函数（）{
var letsdraw=假；
var theCanvas=document.getElementById（'paint'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=420；
canvas.height=300；
var canvasOffset=$（'#paint'）.offset（）；
var lastpoints={
“x”：0，
“y”：0
};
$（'#paint'）.mousemove（函数（e）{
如果（letsdraw==真）{
lastpoints.x=e.pageX；
lastpoints.y=e.pageY；
}
});
$（“#绘制”）.mousedown（函数（e）{
letsdraw=真；
ctx.strokeStyle='蓝色'；
ctx.lineWidth=1；
ctx.beginPath（）；
ctx.moveTo（e.pageX-canvasOffset.left，e.pageY-canvasOffset.top）；
});
$（'#paint'）.mouseup（函数（e）{
lineTo（lastpoints.x-canvasOffset.left，lastpoints.y-canvasOffset.top）；
ctx.stroke（）；
letsdraw=假；
});
});

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