如何将所选颜色设置为笔颜色？

Question

我正在 HTML 中制作像素艺术画家工具，我想添加一个颜色选择器并将选择的颜色设置为您正在绘画的颜色。

HTML：

<label for="colorpicker">Color Picker:</label>
 <input type="color" id="colorpicker" value="#0000ff">

JS：

var penColour = 'black';
    
  function setPenColour(pen)
  {
    penColour = pen;
  }

  function setPixelColour(pixel)
  {
    pixel.style.backgroundColor = penColour;
  }

Answer 1

只需 select 输入 js 并检索其值：

let penColour = 'black';
const picker = document.getElementById("colorpicker");
    
function setPenColour() {
  penColour = picker.value;
}
  
function setPixelColour(pixel) {
  pixel.style.backgroundColor = penColour;
}

在此处查看更多信息

您可能还想做的是听颜色选择器的更改事件，而不是手动更新“penColour”

picker.addEventListener("change", (ev) => {
  penColour = ev.value;
})