onchange 颜色选择器不改变 canvas 背景颜色

Question

我正在尝试根据来自颜色选择器的用户输入为学校项目更改 canvas 元素的背景。但是我似乎无法让它工作。我检查了代码，一切似乎都被正确选择了。有什么想法吗？

docolor() {
  var myCanvas = document.querySelector("#myCanvas");
  var colorinput = document.querySelector("#clr");
  var color = colorinput.value;
  myCanvas.style.backgroundColor = color;
}

  <head>
    <title> canvas practice </title>
   </head>
  <body>
    <canvas id = "myCanvas"> 
    </canvas> 
    <br>
    <input type = "color" value = "#001A57" id = "clr" onchange = "docolor()">
  </body>
</html>

-

#clr {
  display: inline-block;
}

#myCanvas {
  height: 150px;
  width: 300px;
  border: 2px solid;
}

Answer 1

看来您忘记了 function 声明。

<html>

<head>
  <title> canvas practice </title>
  <style>
    #clr {
      display: inline-block;
    }

    #myCanvas {
      height: 150px;
      width: 300px;
      border: 2px solid;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas">
  </canvas>
  <br>
  <input type="color" value="#001A57" id="clr" onchange="docolor()">
</body>
<script>
  function docolor() {
    var myCanvas = document.querySelector("#myCanvas");
    var colorinput = document.querySelector("#clr");
    var color = colorinput.value;
    myCanvas.style.backgroundColor = color;
  }
</script>

</html>

Answer 2

docolor 未正确定义，因此它永远不会运行。像这样声明你的函数，它应该可以工作：

function docolor() {
  var myCanvas = document.querySelector("#myCanvas");
  var colorinput = document.querySelector("#clr");
  var color = colorinput.value;
  myCanvas.style.backgroundColor = color;
}

如果仍然无法正常工作，请告诉我。 Here's a link to a working codepen 如果你想看到所有东西一起工作。祝你的项目好运！

onchange 颜色选择器不改变 canvas 背景颜色

Onchange color picker not changing canvas background color

html

javascript

css

canvas

onchange