畫布繪制多條線而不是一個 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);