画布绘制多条线而不是一个 javascript

Question

所以我希望用户能够画线，我想要这样的东西，

但我也希望他画多条线，所以我删除了这条线：

    ctx.clearRect(0, 0, canvas.width, canvas.height);

但是当我这样做时，我得到了这个

这是我的代码：

 //Canvas const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); //constiables // const canvasx = $(canvas).offset().left; // const canvasy = $(canvas).offset().top; let canvasx = canvas.offsetLeft; let canvasy = canvas.offsetTop; let last_mousex = (last_mousey = 0); let mousex = (mousey = 0); let mousedown = false; //Mousedown canvas.addEventListener("mousedown", function (e) { last_mousex = parseInt(e.clientX - canvasx); last_mousey = parseInt(e.clientY - canvasy); mousedown = true; }); //Mouseup canvas.addEventListener("mouseup", function (e) { mousedown = false; }); //Mousemove canvas.addEventListener("mousemove", function (e) { mousex = parseInt(e.clientX - canvasx); mousey = parseInt(e.clientY - canvasy); if (mousedown) { // ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(last_mousex, last_mousey); ctx.lineTo(mousex, mousey); ctx.strokeStyle = "black"; ctx.lineWidth = 10; ctx.lineJoin = ctx.lineCap = "round"; ctx.stroke(); } //Output document.querySelector("#output").innerHTML = "current: " + mousex + ", " + mousey + "<br/>last: " + last_mousex + ", " + last_mousey + "<br/>mousedown: " + mousedown; });

 <canvas id="canvas"></canvas> <div id="output"></div>

Answer 1

如果我正确理解您想要什么，这是因为您仅在用户按下时才设置 last_mousex 和 last_mousey。

你不会在他们每次移动时更新它，所以他们点击“原点”的那一刻就被锁定在那个位置。 然后在顺序绘制中永远不会更新。

要解决此问题，只需从此处移动 last_mouseX/Y

//Mousedown
canvas.addEventListener("mousedown", function (e) {
  last_mousex = parseInt(e.clientX - canvasx); // remove this 
  last_mousey = parseInt(e.clientY - canvasy); // and this
  mousedown = true;
});

在您渲染线的位置之后：

canvas.addEventListener("mousemove", function (e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(last_mousex, last_mousey);
    ctx.lineTo(mousex, mousey);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 10;
    ctx.lineJoin = ctx.lineCap = "round";
    ctx.stroke();
  }

  //right here! 
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);