Важность BeginPath() и ClosePath() в Canvas в HTML5

Функция BeginPath очень проста: она позволяет начать новый путь, но она очень важна в процессе рисования на холсте.

Давайте сначала посмотрим на небольшой фрагмент кода:

 var ctx=document.getElementById(canvas).getContext(2d); ctx.beginPath(); ctx.rect(150,150,100,100); ctx.fillStyle=green; ctx.fill(); .fillStyle=желтый; ctx.fill();

В нашем коде ошибок нет, но мы получаем два желтых квадрата с длиной стороны 100 пикселей вместо одного зеленого и одного желтого. Почему?

Фактически, методы рисования (fill, stoke) в холсте будут рисовать все пути после последнего BeginPath. В приведенном выше коде первый прямоугольник заполняется дважды, первый раз зеленый, а второй раз желтый, поэтому два желтых прямоугольника. Аналогично были получены и для рисования сегментов линий, других кривых или графики, независимо от того, куда вы перемещаетесь, пока у вас нет начального пути, вы рисуете путь.

Если нарисованная вами графика не соответствует тому, что вы себе представляли, не забудьте проверить BeginPath.

Говоря о BeginPath, мы должны упомянуть closePath. На самом деле, closePath не имеет ничего общего друг с другом. closePath означает закрытие пути, а не его завершение. Он просто соединяет конечную точку пути с начальной точкой. , а не начинать новый путь.

Мы добавляем closePath после первого заполнения приведенного выше кода, и все равно получаем два желтых прямоугольника.

Но если мы добавим BeginPath позже, мы получим два прямоугольника разных цветов.

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

метод начатьПуть()

 var ctx = document.getElementById('cvs') ; ctx.beginPath () ; ctx.moveTo (100.5, 20.5); ctx.lineTo (200.5, 20.5); ctx.moveTo (100,5, 40,5); ctx.lineTo (200,5, 40,5) ctx.strokeStyle = '#f00';

0,5 — чтобы избежать размытых линий. Так какую же графику получит приведенный выше код? Это черная линия и красная линия?

С точки зрения кода проблем с нашей логикой нет, но в результате мы получаем две красные линии, а не одну черную и одну красную.

Если вы понимаете, почему это так, то остальное вам читать не нужно. В этом важность BeginPath.

Методы рисования в холсте (такие как Stroke, Fill) будут рисоваться на основе всех путей после последнего BeginPath. Например, в приведенном выше коде я дважды провел штрих. Фактически, эти два штриха были основаны на всех путях после первого BeginPath. То есть мы дважды обводили первый путь: первый штрих был черным, а второй — красным, поэтому в итоге он тоже был красным.

1. Независимо от того, куда вы используете moveTo для перемещения кисти, пока вы не начинаете путь, вы всегда рисуете путь.

2. Такие функции, как fillRect иstrokeRect, которые рисуют независимые области напрямую, не прерывают текущий путь.

Если нарисованная вами графика отличается от той, которую вы себе представляли, не забудьте проверить, существует ли разумный начальный путь.

-------

Говоря о BeginPath, мы должны упомянуть closePath. Эти два метода тесно связаны? Ответ: почти ничего.

closePath означает не завершение пути, а закрытие пути. Он попытается соединить путь от конца текущего пути к начальной точке, чтобы закрыть весь путь. Однако это не значит, что путь после него — новый путь!

Мы добавляем closePath после первой строки в приведенном выше коде и видим, что по-прежнему получаем две красные строки.

Но если мы добавим BeginPath после первого штриха, мы получим, как и ожидалось, черную и красную линии.

 ctx.stroke () ; ctx.beginPath () // Внимание! ctx.moveTo (100.5, 40.5) ctx.lineTo (200.5, 40.5) ctx.strokeStyle = '#f00';

Таким образом, не пытайтесь начать новый путь, закрыв существующий путь. Когда вы начинаете новый путь, предыдущий путь не будет закрыт.