如何在javascript中使用循环制作二维背景

// 创建一个canvas元素
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);

// 获取canvas的上下文
var ctx = canvas.getContext("2d");

// 定义背景的行和列数
var rows = 8;
var cols = 8;

// 定义每个格子的宽度和高度
var cellWidth = canvas.width / cols;
var cellHeight = canvas.height / rows;

// 定义背景颜色数组
var colors = ["#f1c40f", "#e67e22", "#e74c3c", "#3498db", "#9b59b6", "#2ecc71", "#1abc9c", "#95a5a6"];

// 循环绘制背景
for (var i = 0; i < rows; i++) {
  for (var j = 0; j < cols; j++) {
    // 计算当前格子的位置
    var x = j * cellWidth;
    var y = i * cellHeight;
    
    // 随机选择一个颜色
    var color = colors[Math.floor(Math.random() * colors.length)];
    
    // 绘制当前格子的背景
    ctx.fillStyle = color;
    ctx.fillRect(x, y, cellWidth, cellHeight);
  }
}