Canvas JavaScript：如何让矩形首次从顶部下落时即应用随机颜色？

嗨，我来帮你搞定这个小问题！咱们先捋清楚为啥第一次矩形是黑色：你的代码里，ctx.fillStyle的随机颜色设置逻辑，只有当矩形滚到底部、重置回顶部的时候才会执行，第一次启动动画时这个条件还没触发，所以Canvas就用了默认的黑色填充。

要让第一次就有随机颜色，咱们只需要在动画启动前先设置一次随机颜色就行，同时保持原来的“每次回到顶部换颜色”的逻辑不变。这里有两种简单的修改方式：

方案一：在动画初始化时先设置一次颜色 #

直接在动画首次初始化时给fillStyle赋值随机颜色，避免重复获取canvas上下文：

var currentPos = 0;
var ctx;
function animate() {
 var canvas = document.getElementById('canvas');
 if (!ctx) {
  ctx = canvas.getContext('2d');
  // 首次启动时设置随机颜色
  ctx.fillStyle = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
 }
 ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth);
 ctx.fillRect(100, currentPos, 20, 20);
 currentPos += 1;
 if(currentPos >= canvas.clientHeight) {
  currentPos = 0;
  // 回到顶部时切换新的随机颜色
  ctx.fillStyle = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
 }
 requestAnimationFrame(animate);
}
document.body.onload = animate;

方案二：封装颜色生成函数（更优雅） #

把生成随机RGB颜色的逻辑抽成独立函数，既避免重复代码，也让后续维护更方便：

var currentPos = 0;
var ctx;

// 封装随机RGB颜色生成函数
function getRandomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

function animate() {
 var canvas = document.getElementById('canvas');
 if (!ctx) {
  ctx = canvas.getContext('2d');
  // 首次启动时设置随机颜色
  ctx.fillStyle = getRandomColor();
 }
 ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientWidth);
 ctx.fillRect(100, currentPos, 20, 20);
 currentPos += 1;
 if(currentPos >= canvas.clientHeight) {
  currentPos = 0;
  // 回到顶部时切换新的随机颜色
  ctx.fillStyle = getRandomColor();
 }
 requestAnimationFrame(animate);
}
document.body.onload = animate;

这样修改后，第一次启动动画时，矩形就会带着随机颜色从顶部开始移动，之后每次回到顶部也会自动切换新的随机颜色，完全符合你的需求～

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