canvas js로 구현하기 (4) - canvas color palette [캔버스 브러시 색 바꾸기]

canvas color palette

 

 

간단하게 브러시 색상을 바꾸는 함수를 만들어 보았습니다.

 

 

 

[ html ]

 

<div class="colors">
   <div class="color" style="background-color: #fc5c65"></div>
   <div class="color" style="background-color: #fd9644"></div>
   <div class="color" style="background-color: #fed330"></div>
   <div class="color" style="background-color: #26de81"></div>
   <div class="color" style="background-color: #2bcbba"></div>
   <div class="color" style="background-color: #45aaf2"></div>
   <div class="color" style="background-color: #4b7bec"></div>
   <div class="color" style="background-color: #a55eea"></div>
   <div class="color" style="background-color: #d1d8e0"></div>
   <div class="color" style="background-color: #4b6584"></div>
</div>

 

 

---

 

[ js ]

1.

const colors = document.querySelectorAll(".color");

 

querySelector는 수많은 color div 중 오직 맨 처음 하나의 div만 선택합니다.

이럴 때 사용 가능한 건 querySelectorAll입니다.

All이 붙으면 하나가 아닌 모든 color div를 선택할 수 있어 getElementsByClassName과 같은 효과를 볼 수 있습니다.

 

 

2.

const colors = document.querySelectorAll(".color");
 
Array.from(colors).forEach((color) =>
  color.addEventListener("click", onColorClick)
);
 

 

각각의 컬러들을 Array.from을 사용해 하나로 묶어 배열로 만들어주고,

forEach()로 각각의 컬러들에 화살표 함수를 사용하여 addEventListener를 줍니다.

각각의 컬러들을 클릭할 때마다 onColorClick함수가 실행될 것입니다.

 

 

3.

const colors = document.querySelectorAll(".color");
 
function onColorClick(event) {
  ctx.fillStyle = event.target.style.backgroundColor;
  ctx.strokeStyle = event.target.style.backgroundColor;
}
 
Array.from(colors).forEach((color) =>
  color.addEventListener("click", onColorClick)
);

 

--->

빨간 색상을 눌렀을 경우, 클릭 이벤트가 발생하고, 그 이벤트의 스타일에서 backgroundColor를 fillStyle과 strokeStyle로 지정을 했기 때문에 빨간색으로 변환되어 그려지게 됩니다.