更改 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

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

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