Обязательно ли использовать .moveTo в Canvas?

150
22 ноября 2019, 11:20

Есть простой код:

<!DOCTYPE html> 
<html> 
 
<head> 
  <title></title> 
</head> 
 
<body> 
  <canvas id="imgCanvas" width="660" height="660" style="border: 2px solid black"></canvas> 
 
  <script type="text/javascript"> 
    let _ctx = document.getElementById('imgCanvas').getContext('2d'); 
    _ctx.beginPath(); 
    _ctx.lineTo(30, 300); 
    _ctx.lineTo(90, 300); 
    _ctx.lineTo(120, 120); 
    _ctx.closePath(); 
    _ctx.stroke(); 
    _ctx.fill(); 
 
    _ctx.beginPath(); 
    _ctx.lineTo(300, 390); 
    _ctx.lineTo(600, 300); 
    _ctx.lineTo(180, 120); 
    _ctx.closePath(); 
    _ctx.stroke(); 
    _ctx.fill(); 
  </script> 
</body> 
 
</html>

Обычный канвас, на котором нужно нарисовать два треугольника. Я читал что использование метода moveTo() обязательное, но и без него все нормально отрисовывается. Я не понимаю вродебы после первой фигуры условное "перо" осталось в позиции (120, 120) и при использовании метода lineTo(300, 390) должна отрисоваться линия из (120,120) в (3000,390), но этого не происходит, почему и обязательное ли тогда использование moveTo() или оно носит рекомендательный характер?

Смысл самого moveTo() мне понятен. Мне непонятно почему эти две фигуры не слиплись ведь самогото moveTo() небыло.

Answer 1

В вашем коде можно и без него. beginPath() позволяет инициализировать новый объект (типо старый - это другая ячейка памяти). Первый lineTo попросту передвигает к конечной координате, т к начального пути нет

но смысл его в этом:

<!DOCTYPE html> 
<html> 
 
<head> 
  <title></title> 
</head> 
 
<body> 
  <canvas id="imgCanvas" width="660" height="660" style="border: 2px solid black"></canvas> 
 
  <script type="text/javascript"> 
    let _ctx = document.getElementById('imgCanvas').getContext('2d'); 
    // наччинаем путь 
    _ctx.beginPath(); 
    // даигаем к координате 
    _ctx.moveTo(30, 300); 
    // рисуем к координате 
    _ctx.lineTo(90, 300); 
    // рисуем к координате 
    _ctx.lineTo(120, 120); 
    // закрываем путь (автоматически дорисовываятся линия от точки move к конечной) 
    _ctx.closePath(); 
    _ctx.moveTo(300, 390); 
    // рисуем к координате 
    _ctx.lineTo(600, 300); 
    // рисуем к координате 
    _ctx.lineTo(180, 120); 
     // закрываем путь (автоматически дорисовываятся линия от точки move к конечной) 
    _ctx.closePath(); 
    _ctx.stroke(); 
    //_ctx.fill(); 
  </script> 
</body> 
 
</html>

READ ALSO
Как найти длину самого короткого слова в строке?
javascript

Как найти длину самого короткого слова в строке?

Перевел строку в массивПодскажите, почему не получается отсортировать?

 170
Не получается сделать hamburger
javascript

Не получается сделать hamburger

 141
Подключение JQuery. Не получается подключить
javascript

Подключение JQuery. Не получается подключить

Всем доброго времени суток! Подскажите, не понимаю в чем дело, пытаюсь подключить JQuery в WebStorm, вставляю ссылку на CDN, WebStorm подчеркивает, как...

 153
Проксирование на базе Nuxt.js
javascript

Проксирование на базе Nuxt.js

Подскажите, пожалуйста, в чём фишка?

 143