如何使用循环将许多画布元素定位在特定位置答案

【问题标题】：How to position many canvas elements at particular position with loop如何使用循环将许多画布元素定位在特定位置
【发布时间】：2019-10-27 08:27:29
【问题描述】：

您可以在下面看到三个画布元素。我想将它们放置在一条水平线上，它们之间正好有 400px 的间隙。我可以手动完成，但如果我想绘制 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.log(x);
    let y = 100;

    c.fillRect(x, y, 100, 100);

}

所有画布元素将相隔 400px 并在同一水平线上

【问题讨论】：

let w = 100; let gap = 400; for(let x = 0; x < c.width; x+= w + gap){ c.fillRect(x, 100, 100, 100);}
@enxaneta 谢谢，但它不起作用

标签： javascript html loops canvas html5-canvas

【解决方案1】：

我正在回答我自己的问题

for(let x = 100; x < 1000; x += 400) {
    console.log(x);
    c.fillRect(x, 100, 100, 100);
}

所以，一开始，“x”是从距离左侧 100 像素的位置开始的。我的目标是准确地绘制 3 个元素，所以我循环脚本直到“x

如果我写 "x

x 中的值

第一个循环：100

第二次循环：500

第三圈：900

第 4 次循环：1300。

......循环结束，如第5个循环“x”大于1500

【讨论】：