[JavaScript] - 그림판 만들기 ② (색깔 선택, 색상표)

[input으로 색상표 만들기]

 

html에 type=color의 속성을 가진 input을 만들어 줍니다.

<input id="color" type="color" />

JS에 input에 대한 변수를 선언해주고 change 이벤트를 만들어줍니다.

color.addEventListener("change", colorChange);

함수를 만들고 console.log(event.target.value)를 해보면 
색상표의 값이 나오는 것을 볼 수 있습니다.

event.target.value의 값을 ctx.strokeStyle에 넣어줍니다.

function colorChange(event) {
  const colorValue = event.target.value;
  ctx.strokeStyle = colorValue;
}

 

다음은 [색상 sample 만들기]

https://flatuicolors.com/

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

위 페이지에 들어가서 마음에 드는 색상을 복사해서 html에 들고 옵니다.

<div class="color-option" style="background-color:#ffffff" data-color="#ffffff"></div>

div안에 [style 속성 =background-color] 로 색상을 넣어주고 class는 전부 같은 변수명을 넣어줍니다.
html의 속성중 data-*로 화면에 보이지 않는 정보를 넣을 수 있는 기능이 있습니다.

data-color안에 background-color에 넣었던 색상을 한번 더 써줍니다.

참조 : https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

 

JS에 변수를 지정해 줍니다.
color-option이라는 이름을 가진 클래스를 전부 들고 와야 되기 때문에 
'getElementsByClassName' 메서드를 써줍니다.

const colorOption = document.getElementsByClassName("color-option");

그리고 click이벤트를 만들어 줘야 되는데 여기서는 모든 colorOption에 한꺼번에 이벤트를 추가하기 위해
forEach를 써서 추가해줍니다 

forEach==>  /*forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용함   배열에 있는 각각의 아이템 실행 ex)localStorage에 저장된값이 8개면 8번실행   */ /* 기본적인 사용법  const arr = [0,1,2,3,4,5,6,7,8,9,10]; arr.forEach(function(element){     console.log(element);   // 0 1 2 3 4 5 6 7 8 9 10 }); // 혹은 arrow 함수 가능 arr.forEach(element => console.log(element)); */

 

colorOption.forEach((color) =>
  color.addEventListener("click", colorClick)
);

하지만 이렇게 forEach를 쓰면 타입 오류가 나는데 왜 그럴까요?

forEach를 쓰기 위해서는 arr(배열)이어야 되는데 
변수로 지정한 getElementsByClassName("color-option")은 배열이 아닌 HTMLCollection으로 취급하기
때문에 오류가 뜨는 것입니다. 
이문제를 해결하기 위해 Array.from()으로 감싸줍니다.

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

Array.from()이란?

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN

 

이제 click 이벤트 함수를 만들어 줘야 되는데 아까 html data-*에 숨겨둔 정보를 이용해서 값을 찾아줍니다.

data-* 의 정보를 보는 방법 : console.dir()을 해주면 dataset 속성에 들어있는 정보를 볼 수 있습니다.

function colorClick(event) {
  console.dir(event.target);
}

이렇게 볼 수 있는 dataset의 color의 값을 ctx스타일에 넣어줍니다.

function colorClick(event) {
  const colorValue = event.target.dataset.color;
  ctx.strokeStyle = colorValue;
  color.value = colorValue;
  //사용자가 어떤 색상을 클릭했는지 알 수 있게 
  //color-input에도 값을 넣어줍니다.
 
}

 

dataset 기능은 다른 것을 만들 때에도 유용하게 쓰이니 잘 기억해 둡니다!

 

 

색상 바꾸기 기능 완성!