자바스크립트 - 그림판 (색깔판 만들기)

랜덤한 색깔이 아닌 지정된 색깔판을 만들어 간단하게 색깔을 사용해보자.

1. HTML에 다양한 색깔판을 div로 만든다.

  <div class="color-options">
        <div class="color-option" style="background-color:#ffffff;" data-color="#ffffff"></div>
        <div class="color-option" style="background-color:#1abc9c;" data-color="#1abc9c"></div>
        <div class="color-option" style="background-color:#3498db;" data-color="#3498db"></div>
        <div class="color-option" style="background-color:#34495e;" data-color="#34495e"></div>
        <div class="color-option" style="background-color:#27ae60;" data-color="#27ae60"></div>
        <div class="color-option" style="background-color:#8e44ad;" data-color="#8e44ad"></div>
        <div class="color-option" style="background-color:#f1c40f;" data-color="#f1c40f"></div>
        <div class="color-option" style="background-color:#e74c3c;" data-color="#e74c3c"></div>
        <div class="color-option" style="background-color:#95a5a6;" data-color="#95a5a6"></div>
        <div class="color-option" style="background-color:#d35400;" data-color="#d35400"></div>
        <div class="color-option" style="background-color:#bdc3c7;" data-color="#bdc3c7"></div>
        <div class="color-option" style="background-color:#2ecc71;" data-color="#2ecc71"></div>
        <div class="color-option" style="background-color:#e67e22;" data-color="#e67e22"></div>
    </div>

2. 자바스크립트에 Array.from 으로 HTML에서 불러온 색깔판들을 배열로 만든다.

const colorOptions = Array.from (
    document.getElementsByClassName("color-option")
)

forEach기능을 사용하여 colorOptions안에 있는 color들에 click 이벤트리스너를 추가한다.

colorOptions.forEach(color => color.addEventListener("click", onColorClick));

onColorClick 함수를 만든다. 유저가 색깔판을 클릭하면 일단 클릭한 컬러를 변수로 저장한다.
그리고 strokeStyle과 fillStyle을 저장된 변수로 한다. color.value도 저장된 변수로 한다.

function onColorClick (event) {
    const colorValue = event.target.dataset.color;
    ctx.strokeStyle = colorValue;
    ctx.fillStyle = colorValue;
    color.value = colorValue;
}