Trying to get a pattern on the canvas with squares in js using loops that looks like this
■
■ ■
■ ■ ■
I currently only have the first loop of squares and am unsure of how to nest the second loop to get this effect. Here is my js
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgba(255, 255, 255, 255)";
for(var i = 0; i < 10; i++) {
ctx.fillRect(i*25, i*25, 20, 20);
}
You need an inner loop, to draw all the n squares in the nth line:
for(var i = 0; i < 10; i++) {
for(var j = 0; j <= i; j++) {
ctx.fillRect(j*25, i*25, 20, 20);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.