作业需求：Canvas JavaScript随机艺术生成器 正方形绘制问题求助

嘿，我一眼就瞅出问题所在啦！你的代码核心bug出在fillRect的参数设置上——你把正方形的宽度和高度都设成了canvas.width和canvas.height，这意味着每次绘制的都是铺满整个画布的矩形，直接覆盖了之前的内容，自然看不到“随机小正方形”的效果～

修正后的代码 #

function drawSquare(canvas, context, color, squareSize = 50) {
  // 计算随机位置时要留出正方形的大小，避免超出画布边界
  var x = Math.floor(Math.random() * (canvas.width - squareSize));
  var y = Math.floor(Math.random() * (canvas.height - squareSize));
  
  context.fillStyle = color;
  // 最后两个参数改为固定的正方形尺寸，不再用画布宽高
  context.fillRect(x, y, squareSize, squareSize);
}

关键修正点说明 #

• 限制随机位置范围：原来的x和y计算没有考虑正方形大小，可能导致正方形一半在画布外。现在用canvas.width - squareSize计算随机最大值，确保整个正方形都能显示在画布内。
• 固定正方形尺寸：把fillRect的后两个参数从画布宽高改成自定义的squareSize（默认设为50，你可以根据需求随意调整），这样才会画出真正的小正方形。
• 可选参数优化：给squareSize加了默认值，调用函数时可以不用每次都传尺寸，用起来更灵活。

举个简单的调用例子（假设你已经获取了canvas和上下文）：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 画一个红色的50x50正方形
drawSquare(canvas, ctx, '#ff0000');
// 画一个蓝色的30x30正方形
drawSquare(canvas, ctx, '#0000ff', 30);

这样就能看到随机出现在画布上的小正方形啦！

内容的提问来源于stack exchange，提问作者Dallas