JavaScript点击页面更改canvas方块颜色功能失效问题求助

你的代码存在以下几个直接导致功能失效的问题：

• 负责绑定点击事件的myBody()函数定义后从未执行，点击事件没有被实际注册到页面上
• 点击回调中修改的是body元素的文字颜色属性style.color，canvas绘制的方块颜色由画布上下文的fillStyle控制，修改文字颜色对方块完全无效
• 原代码中引用的rgb数组未定义，直接读取会抛出JS错误中断执行
• 定时器的重绘逻辑没有关联颜色变量，就算修改了绘制颜色，重绘时也不会应用新值

• 移除冗余的未调用函数，页面加载完成后直接绑定点击事件
• 新增全局变量存储当前方块的填充颜色，设置初始默认值
• 点击事件触发时，随机生成合法的RGB颜色值更新全局颜色变量
• 定时器每次执行重绘逻辑时，先将ctx.fillStyle赋值为当前存储的颜色，再绘制方块，保证新颜色即时生效

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <title>Cuadro cambia color // By Abraham Gonzalez</title>
</head>
<body id="myBody"> 
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    let posicion = 0;    
    let tamano = 0;
    // 存储当前方块颜色，初始值为红色
    let currentFillColor = "red";

    // 绑定页面点击事件
    document.getElementById("myBody").addEventListener("click", () => {
      // 生成0-255区间的随机三色值
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      currentFillColor = `rgb(${r}, ${g}, ${b})`;
    })

    setInterval(() => {
      ctx.clearRect(0, 0, 400, 400);
      // 应用最新颜色绘制方块
      ctx.fillStyle = currentFillColor;
      ctx.fillRect(posicion, 0, tamano, tamano);
      
      posicion++;
      tamano++;
      
      if (posicion > 400) {
        posicion = 0;
        tamano = 0;
      }
    }, 30);
  </script>
</body>
</html>

上述代码可以直接运行，每次点击页面都会生成随机颜色，动态增长的方块会立即使用新颜色绘制，支持多次点击重复触发换色。

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