如何在Java脚本中使用循环来改变位置来绘制多个正方形?

Question

我试图使用一个按钮，可以建立一个小正方形，每次我点击它只改变位置x

这是代码但是它没有画一个正方形而是画了一个长矩形

let addBlock = document.getElementById('addBlock')
var c = document.getElementById('canvas1');
var ctx = c.getContext("2d");
let s =0;
for(let i=0; i<=100; i=i+5 ){
addBlock.addEventListener('click', function(){
ctx.beginPath();
ctx.rect(10+i, 20,9, 100);
ctx.fill()
s=s+i;   })}

Answer 1

rect(x,y,height,width)

我想你只需要把宽度从100改为9。

ctx.rect(10+i, 20, 9, 9);

Answer 2

如果我正确理解了应用程序的目的，那么您希望更改每次单击的位置。你的代码不工作，因为前循环完成之前，你甚至得到点击一次。我的解决方案如下:

let addBlock = document.getElementById('addBlock');
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
let i = 0;
let fn = function() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.rect(20 + i, 20, 100, 100);
ctx.fill();
i += 5;
addBlock.addEventListener('click', fn);
};
addBlock.addEventListener('click', fn);

请参阅我的Stackblitz链接以获取工作示例:https://stackblitz.com/edit/web-platform-4dhxpt?file=script.js

编辑:

将代码更改为最多运行20次:

let fn = function() {
if (i >= 100) {
return;
}
ctx.beginPath();
ctx.rect(20 + i, 20, 100, 100);
ctx.fill();
i += 5;
addBlock.addEventListener('click', fn);
};