无法在我的 JavaScript 绘图板中更改颜色

Question

我是 JavaScript 的初学者。我希望 3 个颜色更改按钮能够正常工作，但不知道该怎么做。请帮助。我尝试添加事件侦听器和函数来更改颜色但无法使其工作。有关如何更改颜色或什至添加色轮而不仅仅是 3 种颜色的任何提示。

Answer 1

如果您希望使用颜色选择器来设置画布描边的颜色，您可以从HTML 原生的颜色选择器开始，如下所示。

<section id="colorChoice">

    <input id="color" type="color" value="#000000" />

    <label for="color"> Choose a color</label>

</section>

然后，如果您想在用户使用颜色选择器时更改某物的颜色，则可以使用“输入”事件侦听器，或者在选择颜色并且颜色选择器窗口不再聚焦时触发“更改”事件。在你的情况下，因为你只会在你点击选择器时绘制，你会想要一个“更改”事件。

您可以按照以下方式添加一些内容

const color = document.querySelector("#color");

function changeColor(e) {

    const color = e.target.value;

    ctx.strokeStyle = color;

}

color.addEventListener("input", changeColor);

参考：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#tracking-color-changes

实际操作：Codepen

Answer 2

您的按钮只有某种颜色的背景显示，但永远不会用 JS 读取

而是向每个按钮添加一个 onclick 事件，该事件返回它的背景属性。

或者更好的是使用输入并添加一个 onchange 并将颜色设置为其值