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

146

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

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

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

167

javascript

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

138

javascript

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

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

151

javascript

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

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

141