Javascript 在鼠标按下事件中选定的两点之间绘制一条直线

我有一段代码，在我移动鼠标的同时单击鼠标（mousedown事件和mousemove事件），可以画一条线

我还希望从点的开始（我第一次单击点的位置，mousedown事件）到结束（我提起鼠标的位置，mouseup事件）绘制一条直线

（函数（）{
var canvas=document.querySelector（“#paint”）；
var ctx=canvas.getContext（'2d'）；
var sketch=document.querySelector（“#sketch”）；
var sketch_style=getComputedStyle（草图）；
canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
变量鼠标={
x:0,，
y:0
};
var last_鼠标={
x:0,，
y:0
};
/*捕鼠工作*/
canvas.addEventListener（'mousemove'，函数（e）{
last_mouse.x=mouse.x；
last_mouse.y=mouse.y；
mouse.x=e.pageX-this.offsetLeft；
mouse.y=e.pageY-this.offsetTop；
}，假）；
/*绘画应用程序*/
ctx.lineWidth=5；
ctx.lineJoin='round'；
ctx.lineCap='圆形'；
ctx.strokeStyle=‘黑色’；
canvas.addEventListener（'mousedown'，函数（e）{
canvas.addEventListener（'mousemove'，onPaint，false）；
}，假）；
addEventListener（'mouseup'，function（）{
canvas.removeEventListener（'mousemove'，onPaint，false）；
}，假）；
var onPaint=函数（）{
ctx.beginPath（）；
ctx.moveTo（last_mouse.x，last_mouse.y）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.closePath（）；
ctx.stroke（）；
};
}());
#草图{
宽度：100%；
高度：200px；
背景色：#中交；
}
您希望存储
鼠标向下
事件的坐标，然后使用它们绘制一条到
鼠标向下
事件坐标的直线。我修改了您的代码以显示一种可以完成的方法：


（函数（）{
var canvas=document.querySelector（“#paint”）；
var ctx=canvas.getContext（'2d'）；
var sketch=document.querySelector（“#sketch”）；
var sketch_style=getComputedStyle（草图）；
canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
变量鼠标={
x:0,，
y:0
};
var last_鼠标={
x:0,，
y:0
};
/*捕鼠工作*/
canvas.addEventListener（'mousemove'，函数（e）{
last_mouse.x=mouse.x；
last_mouse.y=mouse.y；
mouse.x=e.pageX-this.offsetLeft；
mouse.y=e.pageY-this.offsetTop；
}，假）；
/*绘画应用程序*/
ctx.lineWidth=5；
ctx.lineJoin='round'；
ctx.lineCap='圆形'；
ctx.strokeStyle=‘黑色’；
canvas.addEventListener（'mousedown'，函数（e）{
initialPoint={x:mouse.x，y:mouse.y}
canvas.addEventListener（'mousemove'，onPaint，false）；
}，假）；
addEventListener（'mouseup'，function（）{
画直线（）
canvas.removeEventListener（'mousemove'，onPaint，false）；
}，假）；
var onPaint=函数（）{
ctx.beginPath（）；
ctx.moveTo（last_mouse.x，last_mouse.y）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.strokeStyle=“#000000”；
ctx.closePath（）；
ctx.stroke（）；
};
让我们来指出
常量drawStraightLine=函数（）{
ctx.beginPath（）；
ctx.moveTo（initialPoint.x，initialPoint.y）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.strokeStyle=“#FF000077”；
ctx.stroke（）；
}
}());
#草图{
宽度：100%；
高度：180像素；
背景色：#DDDDDD；
}
您希望存储
鼠标向下
事件的坐标，然后使用它们绘制一条到
鼠标向下
事件坐标的直线。我修改了您的代码以显示一种可以完成的方法：


（函数（）{
var canvas=document.querySelector（“#paint”）；
var ctx=canvas.getContext（'2d'）；
var sketch=document.querySelector（“#sketch”）；
var sketch_style=getComputedStyle（草图）；
canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
变量鼠标={
x:0,，
y:0
};
var last_鼠标={
x:0,，
y:0
};
/*捕鼠工作*/
canvas.addEventListener（'mousemove'，函数（e）{
last_mouse.x=mouse.x；
last_mouse.y=mouse.y；
mouse.x=e.pageX-this.offsetLeft；
mouse.y=e.pageY-this.offsetTop；
}，假）；
/*绘画应用程序*/
ctx.lineWidth=5；
ctx.lineJoin='round'；
ctx.lineCap='圆形'；
ctx.strokeStyle=‘黑色’；
canvas.addEventListener（'mousedown'，函数（e）{
initialPoint={x:mouse.x，y:mouse.y}
canvas.addEventListener（'mousemove'，onPaint，false）；
}，假）；
addEventListener（'mouseup'，function（）{
画直线（）
canvas.removeEventListener（'mousemove'，onPaint，false）；
}，假）；
var onPaint=函数（）{
ctx.beginPath（）；
ctx.moveTo（last_mouse.x，last_mouse.y）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.strokeStyle=“#000000”；
ctx.closePath（）；
ctx.stroke（）；
};
让我们来指出
常量drawStraightLine=函数（）{
ctx.beginPath（）；
ctx.moveTo（initialPoint.x，initialPoint.y）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.strokeStyle=“#FF000077”；
ctx.stroke（）；
}
}());
#草图{
宽度：100%；
高度：180像素；
出身背景
  const mouseDownAt = {x: 0, y: 0};

  canvas.addEventListener('mousedown', function(e) {

    mouseDownAt.x = e.pageX - this.offsetLeft;
    mouseDownAt.y = e.pageY - this.offsetTop;

    canvas.addEventListener('mousemove', onPaint, false);
  }, false);

  canvas.addEventListener('mouseup', function() {
    lastMouse.x = mouse.x;
    lastMouse.y = mouse.y;
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;

    // if mouse has moved?? draw the last little bit
    if (mouse.x !== last_mouse.x || mouse.y !== last_mouse.y) {
         onPaint();
    }

    // set the end position
    lastMouse.x = mouse.x;
    lastMouse.y = mouse.y;

    // use the mouse down at pos as the new position
    mouse.x = mouseDownAt.x;
    mouse.y = mouseDownAt.y;

    // draw the line
    onPaint();

    canvas.removeEventListener('mousemove', onPaint, false);
  }, false);

  function onPaint () {
    ctx.beginPath();
    ctx.lineTo(lastMouse.x, lastMouse.y);  // after beginPath lineTo is the same
                                             // moveTo
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
  };