更改 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()">