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

В JavaScript определены следующие операторы, предназначенные для организации циклов:

• Цикл for
• Цикл do...while
• Цикл while
• Метка (label)
• break
• continue
• for...in
• for...of

Цикл for

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

for ([начало]; [условие]; [шаг]) [операторы]

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

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

Цикл for удобно использовать когда известно количество повторений. Построим 10 квадратов на холсте:

var obj = document.getElementById('drawing'); // Получить объект холста
if (obj.getContext){ // Проверить поддерживает ли браузер возможность рисования на холсте
  var ctx = obj.getContext('2d');
  for (var i=1; i<=10; i++) {
     ctx.fillRect (50*i, 10, 30, 30);
  }
}

Пример можно запустить во вкладке JS на странице редактора кода в шаблоне для рисования.

Цикл do...while

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

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

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

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

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

var obj = document.getElementById('drawing'); // Получить объект холста
if (obj.getContext){ // Проверить поддерживает ли браузер возможность рисования на холсте
  var ctx = obj.getContext('2d');
 
  var i=50; // начальное значение
  do {
    ctx.fillRect (i, 50, 30, 30);
    i=i+50; // шаг приращения
  }  while (i < obj.width); // условие проверки
}

Цикл while

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

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

Если условие становится ложным, операторы в цикле перестают выполняться и управление переходит к операторам после цикла.

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

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

Выполним повторение квадратов, пока не достигнем конца холста по ширине.

var obj = document.getElementById('drawing'); // Получить объект холста
if (obj.getContext){
  var ctx = obj.getContext('2d');
 
  i=50; // начальное значение
  while (i < obj.width) {
    ctx.fillRect (i, 90, 30, 30);
    i=i+50; // шаг приращения
  }

Примеры циклов

Результат выполнения всех циклов в одной программе:

Еще один пример построения звездного неба с использованием описанных в лекции "Использование функций при построении изображений" функций Star и randInt:

var randInt = n => Math.floor(Math.random() * n) + 1;
 
function Star(cntx, x, y, size, color) {
  cntx.fillStyle = color; 
  cntx.beginPath();
  cntx.moveTo(x, y-size);
  cntx.lineTo(x - size/4, y - size/4);
  cntx.lineTo(x - size, y);
  cntx.lineTo(x - size/4, y + size/4);
  cntx.lineTo(x, y + size);
  cntx.lineTo(x + size/4, y + size/4);
  cntx.lineTo(x + size, y);
  cntx.lineTo(x + size/4, y - size/4);
  cntx.lineTo(x, y - size);
  cntx.fill();
} 
 
var obj = document.getElementById('drawing'); // Получить объект холста
if (obj.getContext){ // Проверить поддерживает ли браузер возможность рисования на холсте
  var ctx = obj.getContext('2d');
  for (var i=1; i<=70; i++)
    Star(ctx, randInt(600), randInt(600), randInt(20), "rgb("+randInt(255)+","+randInt(255)+","+randInt(255)+")");
}

Результат:

Запустить пример и внести в него изменения можно на странице "Пример звездного неба на JS"