Сделать ничью приложения с JS?

Question

Я хочу сделать приложение для рисования в JS.Итак, я начал создавать холст в HTML, а также писать код в JS.Однако, когда я запускаю свой сценарий, я могу нарисовать только некоторую точку, и я хотел бы нарисовать линии вручную с помощью мыши.

Не могли бы вы помочь мне, пожалуйста?

window.addEventListener("load", function(){
  var clear = document.getElementById("clear");
  var paint = false;

  can = document.querySelector("canvas");
  context = can.getContext("2d");
  can.addEventListener("mouseup", finish);
  can.addEventListener("mousemove", draw);
  clear.addEventListener("click", clearContent);
  can.addEventListener("mousedown", painting);

  function clearContent(){	
    context.clearRect(0, 0, can.width, can.height);
  }

  function painting(){
    paint = true;
  }

  function finish(){
    paint = false;
  }

  function draw(e){
    if (!paint) return 0;
      context.strokeStyle="black";
      context.lineWidth = 5;
      context.lineCap = "round";
      context.beginPath();
      context.moveTo(e.clientX, e.clientY);
      context.lineTo(e.clientX, e.clientY);
      context.stroke();
  }
});

canvas { border: 1px solid }

<canvas></canvas>
<br>
<button id="clear">Clear</button>

Answer 1

Вам необходимо провести линию от предыдущей точки, а не от текущей точки. Это довольно просто сделать, потому что контекст холста помнит предыдущий пункт. Кроме того, не вызывайте beginPath, так как это приведет к прерыванию последовательности точек для соединения.

Вы также можете использовать более точный способ определения точных координат.

Смотрите этот вариант вашего кода:

window.addEventListener("load", function(){
  var clear = document.getElementById("clear");
  var paint = false;

  can = document.querySelector("canvas");
  context = can.getContext("2d");
  can.addEventListener("mouseup", finish);
  can.addEventListener("mousemove", draw);
  clear.addEventListener("click", clearContent);
  can.addEventListener("mousedown", painting);

  function clearContent(){	
    context.clearRect(0, 0, can.width, can.height);
  }

  function painting(){
    paint = true;
    context.beginPath(); /// <--- move this here
  }

  function finish(){
    paint = false;
  }

  function draw(e){
    if (!paint) return 0;
      var rect = e.target.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var y = e.clientY - rect.top;
      context.strokeStyle="black";
      context.lineWidth = 5;
      context.lineCap = "round";
      // Don't do any of these here:
      // context.beginPath();
      // context.moveTo(x, y);
      // ... only draw line from previous point:
      context.lineTo(x, y);
      context.stroke();

  }
});

canvas { border: 1px solid }

<canvas></canvas>
<br>
<button id="clear">Clear</button>