时间戳

首页 > 解决方案 > 如何使用“输入颜色和 onchange”更改画布背景颜色

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

问题描述

我的老师给了我作业，但他没有解释细节。他只是说“编写 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>

标签： javascripthtmlhtml5-canvas

解决方案

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

将输入更改为：

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

并将函数更改为：

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

推荐阅读