Как расположить множество элементов холста в определенной позиции с помощью цикла
Ниже вы можете видеть, что есть три элемента холста. Я хочу расположить их на горизонтальной линии с промежутком ровно 400 пикселей между ними. Я могу сделать это вручную, но это становится непрактичным, если я хочу нарисовать 100 таких элементов. Как решить проблему с циклом?
let canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let c = canvas.getContext('2d');
c.fillRect(100, 100, 100, 100);
c.fillRect(500, 100, 100, 100);
c.fillRect(900, 100, 100, 100);
Это то, что я пробовал
for (let i = 0; i < 3; i++) {
c.beginPath();
let x = 100; // { x = Math.random() * window.innerWidth } works
x = x + 400;
console.info(x);
let y = 100;
c.fillRect(x, y, 100, 100);
}
Все элементы холста будут разделены на 400 пикселей и будут находиться на одной горизонтальной линии.
@enxaneta спасибо, но это не работает
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
я отвечаю на свой вопрос
for(let x = 100; x < 1000; x += 400) {
console.info(x);
c.fillRect(x, 100, 100, 100);
}
Итак, вначале «x» начинается в позиции, которая находится на расстоянии 100 пикселей слева. Моя цель состояла в том, чтобы нарисовать ровно 3 элемента, поэтому я зацикливаю скрипт до « x < 1000 », и в каждом цикле x будет увеличиваться на «400 пикселей» от предыдущего значения.
Если я напишу «x < 1500», то получу 4 цифры, потому что
значение х в
1-я петля: 100
2-й цикл: 500
3-й цикл: 900
4-й цикл: 1300.
......конец цикла, так как в 5-м цикле "x" больше 1500
let w = 100; let gap = 400; for(let x = 0; x < c.width; x+= w + gap){ c.fillRect(x, 100, 100, 100);}