Должен ли я иметь content.beginPath() и content.closePath()?

Должны ли быть включены beginPath и closePath для этой строки для рисования или для всей графики. У меня есть новая книга 5 5 Canvas, но я не был полностью уверен в этом. Я прокомментировал две строки, и строка все еще отображается. Каково значение этих двух линий.

Вопрос: Что делают функции beginPath() и closePath()?

код:

context.lineJoin='round';
context.lineCap='butt';
context.beginPath();
context.moveTo(10, 100);
context.lineTo(35, 100);
context.lineTo(35,125);
context.stroke();
context.closePath();

ОТВЕТЫ

Ответ 1

Нет, beginPath и closePath не нужны.

Контекст canvas имеет текущий путь. Вы можете добавить инструкции к этому пути с помощью таких методов, как moveTo и lineTo, среди прочих. Когда вы закончите создание пути, вы можете использовать такие методы, как stroke и fill, которые рисуют на холсте с использованием текущего пути.

closePath - это еще одна инструкция, которую вы можете добавить. Вы не можете заметить его эффект при использовании fill, но при использовании stroke он (по существу) выполнит линию в исходное положение, "закрывая путь". Сравните и сравните:

two linesa triangle

ctx.moveTo(10, 10);    ctx.moveTo(10, 10);
ctx.lineTo(90, 10);    ctx.lineTo(90, 10);
ctx.lineTo(90, 90);    ctx.lineTo(90, 90);
                       ctx.closePath();   
ctx.stroke();          ctx.stroke();

beginPath, с другой стороны, отбрасывает предыдущий путь и позволяет вам начать новый. Без этого вы будете добавлять все больше и больше к предыдущему пути, что может быть нежелательным. Сравните и сравните:

a double-red-blue stroked line and a blue linea red line and a blue line

ctx.moveTo(10, 10);           ctx.moveTo(10, 10);
ctx.lineTo(90, 10);           ctx.lineTo(90, 10);
ctx.lineWidth = 4;            ctx.lineWidth = 4;
ctx.strokeStyle = "red";      ctx.strokeStyle = "red";
ctx.stroke();                 ctx.stroke();
                              ctx.beginPath();
ctx.moveTo(10, 20);           ctx.moveTo(10, 20);
ctx.lineTo(90, 20);           ctx.lineTo(90, 20);
ctx.lineWidth = 2;            ctx.lineWidth = 2;
ctx.strokeStyle = "blue";     ctx.strokeStyle = "blue";
ctx.stroke();                 ctx.stroke();

Ответ 2

beginPath() очищает старый путь, чтобы вы могли определить новый.

closePath() соединяет первую точку с последней точкой и не требуется в вашем примере. В любом случае это было бы использовано до поглаживания заполнения, чтобы повлиять на растрированный результат.