画布中的关键事件背景更改

Question

我正在尝试在 Canvas 中添加一个 keydown 事件，它将背景颜色更改为随机颜色，到目前为止，我没有收到任何错误，但我的功能无法正常工作。

到目前为止，我想我可能必须告诉函数将其应用于画布背景？不太确定自己的判断>

    window.addEventListener('keydown', function(event) {
  if (event.keyCode === 40) {
    fillBackgroundColor();
  }
});


function fillBackgroundColor() {
        var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
        var color = colors[Math.floor(Math.random()*colors.length)];
    }

Answer 1

代码正在生成一种新的随机颜色并将颜色存储在局部变量中，但除此之外对颜色没有任何作用。代码需要用颜色重新绘制画布。假设您有一个 id 为“canvas”的画布...

<canvas id="canvas" width="400" height="400"></canvas>

然后 fillBackgroundColor() 方法可以更改为...

function fillBackgroundColor() {
    var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
    var color = colors[Math.floor(Math.random()*colors.length)];
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.fillStyle = color;
    context.fillRect(0, 0, canvas.width, canvas.height);
}

请注意，此代码使用随机背景颜色完全重新绘制画布。如果您已经在画布上绘制了任何前景对象，那么您还必须重新绘制这些前景对象。