[Vanilla-JS] 5. Changing Color / Brush Size

먼저 각 색상에 클래스를 정의한다.

---

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

console.log로 출력해보니 Array가 안나와서 array.from 메소드를 사용하겠다. (object로부터 array를 만든다.)

 

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

---

우리가 원하는건 backgroundColor이다.

---

색상을 클릭하면 이렇게 backgroundColor 값이 출력된다.

---

이제 context color를 변경해야 된다.

기본값이 검은색으로 되어있는 strokeStyle에 클릭한 색상의 값이 들어간다.

color를 target으로부터 받아서 넣은 것 뿐이다.

 

---

<Brush Size>

 

js파일에 jsRange 아이디를 추가하는 게 필요하다.

const range = document.getElementById("jsRange");

---

target에 가서 쭉 내리다보면 우리가 찾던 value가 나온다.

결국 event.target.value를 원했던 거다.

---

그리고 전에 최소, 최대 사이즈 그리고 steps 에 대해 말했던 건데

steps는 움직일 때마다 얼마씩 증가시키는지 설정하는 거다.

이제 lineWidth에 override를 할 거다.

lineWidth의 기본값은 2.5다.

 

---

이제 Fill을 누르면 색이 채워지게 만들어보자.

 

먼저 FILL 버튼을 누르면 버튼이 PAINT로 바뀌게 만들거다.

filling mode면 브러쉬로 그려지는 게 아니라 canvas를 클릭하면 canvas 전체에 색이 채워지게 하고 싶은거다.

그래서 filling mode인지 아닌지 알 수 있는 게 필요한 거다.

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.