[바닐라JS로 그림판 만들기] Changing Color

[출처-유튜브 노마드 코더 Nomad Coders]

https://youtu.be/cq-l2zPUVoU

 

Recap 후에 우리가 할 일은 색상을 바꾸는 것이다.

 

 

index.html

<div class="controls__colors" id="jsColors">
    <div class="controls__color jsColor" style="background-color: black;"></div>
    <div class="controls__color jsColor" style="background-color: white"></div>
    <div class="controls__color jsColor" style="background-color: #ff3b3c"></div>
    <div class="controls__color jsColor" style="background-color: #ff9500"></div>
    <div class="controls__color jsColor" style="background-color: #ffcc00"></div>
    <div class="controls__color jsColor" style="background-color: #4cd963"></div>
    <div class="controls__color jsColor" style="background-color: #5ac8fa"></div>
    <div class="controls__color jsColor" style="background-color: #0579ff"></div>
    <div class="controls__color jsColor" style="background-color: #5856d6"></div>
</div>

 

 

 

app.js

const colors = document.getElementsByClassName("jsColor");

console.log(Array.from(colors));

깜빡하고 closePath()를 안지움....

 

 

 

function handleColorClick(event) {
    console.log(event.target.style);
}

Array.from(colors).forEach(color => 
    color.addEventListener("click", handleColorClick)
);

색을 클릭할때마다 array를 가진다.

 

 

 

좀 더 다듬어보자.

function handleColorClick(event) {
    const color = event.target.style.backgroundColor;
    console.log(color);
}

 

 

 

그리고 지금은 strokeStyle이 검정색으로 지정되어있지만

strokeStyle을 override하면 handleColorClick 함수에서는 strokeStyle이 target에 있는 색상이 되는 것이다.

function handleColorClick(event) {
    const color = event.target.style.backgroundColor;
    ctx.strokeStyle = color;
}

우리가 한건 ctx.strokeStyle을 바꾼 것 밖에 없다.

그리고 color을 target으로부터 받아서 넣은 것 뿐이다.