javascript - 更改 Canvas 的背景颜色

Question

在 Canvas 上，我有一个默认颜色为白色的矩形，我想通过使用将颜色存储在文本框中的颜色选择器来更改其颜色。如果用户输入颜色名称、值或输入颜色选择器，它应该改变。
我不明白为什么我的代码根本不起作用。你可以帮帮我吗？

const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth - 60;
canvas.height = 400;

let context = canvas.getContext("2d");

let start_background_color = "white";

context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.fillStyle = start_background_color;
context.fillRect(0, 0, window.innerWidth, window.innerHeight);

function change_background_color() {
  let color = document.getElementById('colorInputColor').value;
  //document.body.style.backgroundColor = color;
  context.fillStyle = color;
  context.fillRect(0, 0, window.innerWidth, window.innerHeight);
  document.getElementById('colorInputText').value = color;
}

<input type="text" id="colorInputText">
<input type="color" class="color-picker" id="colorInputColor">
<input type="button" id="colorButton" value="Click to Change Color" onclick="change_background_color">
<canvas id="canvas"></canvas>

Answer 1

调用函数 change_background_color 时，您也必须像这样使用括号

<input type="button" id="colorButton" value="Click to Change Color" onclick="change_background_color()">