Question

我的老师给了我作业，但他没有解释细节。他只是说“编写JS代码以使用颜色输入和onChange事件更改画布背景”。到目前为止，我已经尝试过了，但是被卡住了：

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas1" width="200" height="100"
style="border:1px; background:red ; color:blue ">
</canvas>
<form>
  <input type="button" onclick="myFunction()">
  <input type="color"  onchange="?">

</form>
<script>
function myFunction() {
  document.getElementById('canvas1').style.background = "green";
}
</script>

  </body>
</html>

Answer 1

您非常接近。您可以做的是为myFunction添加一个参数，该参数将作为输入对自身的引用，然后使用该参数来设置值。这是我的意思的示例：

将输入更改为此：

<input type="color"  onchange="myFunction(this)">

并将功能更改为此：

function myFunction(self) {
    document.getElementById('canvas1').style.background = self.value;
}

如何使用“输入颜色和onchange”更改画布背景颜色

1 个答案: