Циклы - это простой способ сделать какое-то действие несколько раз. Существует несколько различных видов циклов, но все они по сути делают одно и тоже: повторяют какое-либо действие несколько раз. При построении графических сцен операторы цикла играют ключевую роль, поскольку позволяют создавать повторяющиеся элементы изображения, обходить вершины и ребра сложных фигур, использовать различные алгоритмы.

Цикл for

Цикл for повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Объявление оператора for выглядит следующим образом:
for ([начало]; [условие]; [шаг]) [операторы]

При его выполнении происходит следующее:

1. Выполняется выражение [начало], если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.
2. Выполняется [условие]. Если условие истинно, то выполняются выражения. Если оно ложно, цикл for прерывается. Если же условие полностью пропущено, то оно считается истинным.
3. Выполняются [операторы]. Чтобы выполнить несколько операторов, используются блок в фигурных скобочках { ... }.
4. Обновляется [шаг], если он есть, а затем управление возвращается к шагу 2.

Мы попробуем отобразить ряд из елок. Давайте отобразим верхушки елей с помощью данного цикла.

for (var i = 0; i < obj.width - 50; i+=40) {
  context.fillStyle = "green";
  context.beginPath();
  context.moveTo(30 + i, 20);
  context.lineTo(10 + i, 40);
  context.lineTo(50 + i, 40);
  context.closePath();
  context.fill();
}

Результат представлен ниже.

Цикл do...while

Цикл do...while повторяется пока заданное условие истинно. Оператор do...while имеет вид:

do
  [операторы]
while ( [условие] );

Операторы выполняются пока условие истинно. Чтобы использовать несколько операторов, используется блок { ... }. Если условие истинно, выражения выполнятся снова. В конце каждого прохода условие проверяется. Если условие ложно, выполнение приостанавливается и управление передаётся следующему оператору после do...while.

Цикл do...while - это цикл с постусловием, т.е. хотя бы один раз операторы внутри этого цикла выполнятся, а затем будет проверено условие, определяющее необходимо ли повторить или закончить операции.

Давайте отобразим основу елей с помощью данного цикла.

i = 0;
 
do {
  context.fillStyle = "green";
  context.beginPath();
  context.moveTo(30 + i, 40);
  context.lineTo(10 + i, 60);
  context.lineTo(50 + i, 60);
  context.closePath();
  context.fill();
  i=i+40; // шаг приращения
} while(i < obj.width - 50)

Результат представлен ниже.

Цикл while

Цикл while выполняет операторы пока условие истинно. Выглядит он так:

while ([условие])
  [операторы]

Условие проверяется на истинность до того, как выполняются операторы в цикле. Если условие истинно, выполняются операторы, а затем условие проверяется снова. Если условие ложно, выполнение приостанавливается и управление переходит к операторам после while. Чтобы использовать несколько операторов внутри цикла, используется блок { ... }.

Цикл while отличается от do...while лишь тем, что операторы внутри него могут не выполняться вообще.

Давайте отобразим последний слой с помощью данного цикла.

while(i < obj.width - 50) {
  context.fillStyle = "green";
  context.beginPath();
  context.moveTo(30 + i, 60);
  context.lineTo(10 + i, 80);
  context.lineTo(50 + i, 80);
  context.closePath();
  context.fill();
  i=i+40; // шаг приращения
} 

Результат представлен ниже.

И, наконец, выведем ствол для каждой ели:

i = 0;
while(i < obj.width - 50) {
  context.fillStyle = "brown";
  context.fillRect(25 + i, 80, 10, 15);
  i=i+40; // шаг приращения
} 

Результат представлен ниже.

Ниже представлен итоговый результат.