如何为素描画板编写随机返回颜色的JavaScript函数

实现逻辑 #

彩虹画笔效果和你已经写完的黑色画笔、橡皮擦逻辑完全一致，唯一区别是不需要给单元格设置固定颜色，而是在每次鼠标悬停到单元格上时，实时生成一个随机RGB颜色赋值给单元格背景即可。

RGB颜色的三个色值取值范围均为0-255的整数，只要每次随机生成三个落在这个区间的数字，拼接为合法的CSS颜色值就能实现随机彩色效果。

完整实现代码 #

补全你空着的rbwButton函数即可：

function rbwButton(){
  grid.querySelectorAll(".box").forEach(box => 
    box.addEventListener("mouseover", () => {
      // 生成三个0-255区间的随机色值
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      // 拼接为rgb格式颜色赋值给背景
      box.style.background = `rgb(${r}, ${g}, ${b})`;
    })
  )
}

效果优化提示 #

如果想要彩虹颜色更鲜亮、不会出现过暗接近黑/过浅接近白的浑浊色，可以把随机值的区间收窄，比如只生成50-255之间的色值，修改随机数计算逻辑即可：

// 生成50-255区间的随机数，避开过暗的色值
const r = Math.floor(Math.random() * 206) + 50;
const g = Math.floor(Math.random() * 206) + 50;
const b = Math.floor(Math.random() * 206) + 50;

另外你当前的代码存在事件重复绑定的问题：每点一次画笔按钮就会给所有单元格新增一个mouseover监听器，多次切换画笔后会同时触发多个画笔的逻辑导致效果混乱。如果要优化可以全局存一个当前画笔模式的变量，页面初始化时只给所有单元格绑定一次mouseover事件，触发事件时根据当前选中的画笔模式决定涂什么颜色，不需要每次点按钮都重新遍历绑定事件。

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