当你按下一个按钮时，如何在画布上改变fillRect的颜色？

要实现当按下一个按钮时，在画布上改变fillRect的颜色，你可以按照以下步骤进行操作：

首先，确保你已经在HTML文档中创建了一个画布元素，使用<canvas>标签，并为其指定一个id，如下所示：

<canvas id="myCanvas"></canvas>

在JavaScript中，获取画布元素的引用，并创建一个绘图上下文，可以使用getContext()方法：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

接下来，你需要定义一个变量来存储当前的颜色。可以使用CSS颜色值，如#ff0000表示红色，或者使用RGB值，如rgb(255, 0, 0)也表示红色。
创建一个按钮元素，并为其指定一个id，用于识别该按钮。例如：

<button id="changeColorBtn">改变颜色</button>

使用JavaScript代码，获取按钮元素的引用，并添加一个点击事件监听器：

var changeColorBtn = document.getElementById('changeColorBtn');
changeColorBtn.addEventListener('click', changeColor);

在点击事件的处理函数中，通过调用fillRect()方法来绘制一个矩形，并使用当前的颜色填充。例如：

function changeColor() {
  // 生成一个随机的颜色，可以使用不同的算法来实现
  var color = getRandomColor();

  // 设置绘图上下文的填充颜色
  ctx.fillStyle = color;

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制一个填充颜色为color的矩形
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function getRandomColor() {
  // 生成一个随机的RGB颜色
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);

  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}