Question

在下面您可以看到有三个画布元素。我想将它们放置在一条水平线上，并且它们之间的间隙恰好为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分隔，并在同一水平线上

Answer 1

我正在回答自己的问题

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

因此，在开始处，“ x”从距左侧100px的位置开始。我的目标是精确绘制3个元素，所以我要循环脚本直到“ x <1000”，并且在每个循环中，x将从上一个值增加“ 400px”。

如果我写“ x <1500”，我将得到4个数字，因为

x在

中的值

第一循环：100

第二个循环：500

第三循环：900

第四循环：1300。

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

如何通过循环将许多画布元素放置在特定位置

1 个答案: