холст рисовать не рисовать - PullRequest
Новая
       18

холст рисовать не рисовать

0 голосов
/ 13 октября 2019

если я ввожу позицию в lineTo () и moveTo (), у меня есть линия, но если я даю позицию touchstart и touchmove, ничего не происходит, и у меня есть ошибка консоли бота, чтобы помочь мне 

touchStart(e){
  this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
  console.log(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}
touchMove(e){
  e.preventDefault();
  this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
  console.log(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
}

  touchDessiner(x, y){
    this.cont.lineWidth = 2;
    this.cont.strokeStyle = "#000";
    this.cont.beginPath();
    this.cont.moveTo(x, y);
    this.cont.lineTo(x, y);
    this.cont.stroke();
  }

спасибо за вашу помощь

1 Ответ

0 голосов
/ 13 октября 2019

Вот правильный порядок рисования линий:

На TouchStart:
1. Начните новый путь (поднимите ручку с холста)
2. Переместите ручку сюда

В режиме TouchMove:
3. держа перо, все еще касающееся холста, переместите перо сюда 

canvas = document.getElementById("can");
cont = canvas.getContext("2d");

function touchStart(e){
  this.cont.beginPath();
  this.cont.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}

function touchMove(e){
  e.preventDefault();
  this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
}

function touchDessiner(x, y){
  this.cont.lineWidth = 2;
  this.cont.strokeStyle = "#000";
  this.cont.lineTo(x, y);
  this.cont.stroke();
}

window.addEventListener("touchstart", touchStart);
window.addEventListener("touchmove", touchMove);
<!DOCTYPE html>
<html>
<body>
  
  canvas
  <canvas id = "can" style = "border: 1px solid black; position:absolute; left:0px; top:0px;"> </canvas>

</body>
</html>
...