ColorPicker不响应

Question

目标：我想通过颜色选择器HTML元素选择一种颜色，在此更改之后，我想立即看到具有相同颜色的canvas元素。

问题：我可以通过颜色选择器选择颜色，但是我的画布矩形没有更改颜色。所有问题都集中在更强大的解决方案上（例如，使用JBOSS或jQuery或SpringBoot）

像这里：

我尝试过的事情：

在这里阅读类似的问题
不同的ID名称
不同的方法名称
白色CSS类中的不同颜色
不同的浏览器
画布的其他访问方法，请参见下文：

function setColorAccordingToColorPicker() {
    var rectangle = getElementById("canvasColorpicker");
    var colorinput = document.getElementById("colorPicker");
    var color = colorinput.value;
    rectangle.fillStyle = color;
    rectangle.fillRect(20, 20, 60, 60);
}

他们都没有帮助。

MCVE：

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Example</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <canvas id="canvasColorpicker" class="white"></canvas>
    <input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
    <script src="javascript.js"></script>
</body>
</html>

Javascript

function setColorAccordingToColorPicker() {
    var rectangle = getElementById("canvasColorpicker");
    var colorinput = document.getElementById("colorPicker");
    var color = colorinput.value;
    rectangle.style.backgroundColor = color;
}

CSS

.white {
    background-color: #001A57;
}

canvas {
    width: 200px;
    height: 100px;
    margin: 10px;
    border: 1px solid lighgrey;
}

有人可以帮忙看看有什么问题吗？谢谢！

Answer 1

function setColorAccordingToColorPicker() {
    var rectangle = document.getElementById("canvasColorpicker");
    var colorinput = document.getElementById("colorPicker");
    var color = colorinput.value;
    rectangle.style.backgroundColor = color;
}

.white {
    background-color: #001A57;
}

canvas {
    width: 200px;
    height: 100px;
    margin: 10px;
    border: 1px solid lighgrey;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Example</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <canvas id="canvasColorpicker" class="white"></canvas>
    <input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
    <script src="javascript.js"></script>
</body>
</html>

需要一些小的更改：

更改此：var rectangle = getElementById("canvasColorpicker");

收件人：var rectangle = document.getElementById("canvasColorpicker");

ColorPicker不响应

问题描述投票：0回答：1

1个回答

最新问题

ColorPicker不响应

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1