HTML5 Canvas中如何为数组每个元素绘制矩形（代码无输出）

你的代码存在两个核心问题，导致画布无法按预期绘制内容，以下是具体修复步骤：

1. 修正setInterval的调用逻辑 #

x_arr.forEach(draw_element)会立即执行一次遍历操作，并将它的返回值（undefined）传给setInterval，这会导致定时器无法周期性触发。你需要把遍历逻辑包装成匿名函数，作为setInterval的第一个参数：

setInterval(() => {
  x_arr.forEach(draw_element)
}, 1000)

2. 可选但推荐：每次绘制前清空画布 #

如果希望每秒更新时替换旧的矩形（而非叠加绘制），需要在绘制前用clearRect清空整个画布：

function draw_element(item, index){
  // 清空画布，参数对应画布的起始坐标、宽度、高度
  cursor.clearRect(0, 0, canvas.width, canvas.height)
  cursor.rect(item, y_arr[index], 10, 10)
  cursor.fill()
}

如果需要保留之前绘制的内容，可跳过此步骤，但动态更新场景下清空画布更符合常规预期。

3. 移除冗余代码 #

你代码中的cursor.stroke()属于无效调用——fillRect已完成填充操作，该语句没有对应的路径可描边，直接删除即可。

完整修复后的代码 #

let x_arr= [100,200,300]
let y_arr= [200,300,400]

var canvas= document.getElementById("myCanvas")
var cursor= canvas.getContext("2d")
cursor.fillStyle = "#FF0000";
// 初始绘制的小方块
cursor.fillRect(50, 50, 4, 4);

function draw_element(item, index){
  // 清空画布
  cursor.clearRect(0, 0, canvas.width, canvas.height)
  // 重新绘制初始小方块（如需保留）
  cursor.fillRect(50, 50, 4, 4);
  cursor.rect(item, y_arr[index], 10, 10)
  cursor.fill()
}

// 正确设置周期性定时器
setInterval(() => {
  x_arr.forEach(draw_element)
}, 1000)

额外说明 #

• 若你的需求是每秒依次绘制单个矩形（而非同时绘制全部），需调整逻辑，比如通过索引递增的方式遍历数组，而非每次执行完整遍历。
• 确保HTML中的canvas元素已通过属性设置正确的宽高（如<canvas id="myCanvas" width="500" height="500"></canvas>），避免CSS样式缩放导致图形变形。

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