如何將所選顏色設置為筆顏色？

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;
})