Canvas에서 색변경을 위한 팔레트 만들기
사용할 수 있는 실 색깔을 늘여놓고 마음대로 조합하려고 한다. 그런데 색의 종류가 너무 많아서 어떻게 할까 고민하다가 일일이 body영역에서 만들지 말고, script영역에서 함수를 이용해 만들어주었다.
일단 색들을 넣을 <div class="palette">를 만들고, querySelector로 선택해둔다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<body>
<!-- 생략 -->
<div class="colorPicker">
<div>
<span>울소프트</span>
<div class="palette set1"></div>
</div>
<div>
<span>겨울정원</span>
<div class="palette set2"></div>
</div>
<div>
<span>럭스체크</span>
<div class="palette set3"></div>
</div>
<div>
<span>나만의디자인</span>
<div class="palette set4"></div>
</div>
</div>
</body>
<script>
const paletteSets = document.querySelectorAll(".palette");
</script>
|
cs |
색상 코드를 모두 colorSet(숫자) 배열에 저장해두고, 그 배열들을 colorSets라는 배열에 다시 저장한다.
맨 마지막에서 for문을 이용해 사용하기 쉽도록 만든 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const colorSet1 = ["#e4e2da", "#4f4b1e", "#af8d9b", "#5e5d5e", "#6b88ad", "#5e161c", "#c75334"];
// colorSet2, colorSet3, colorSet4 생략
const colorSets = [colorSet1, colorSet2, colorSet3, colorSet4];
// 화면에 색깔 div를 만드는 함수
function addColorPalette(palette, colors) {
for (i = 0; i < colors.length; i++) {
let colorDiv = document.createElement("div"); // 새로운 div 생성
colorDiv.classList.add("color"); // class 추가
colorDiv.style.backgroundColor = colors[i]; // 배경색 지정
colorDiv.addEventListener("click", e => ctx.strokeStyle = e.target.style.backgroundColor); // eventListener 연결
palette.appendChild(colorDiv); // palette 내부에 추가
}
}
// 함수를 이용해 여러 세트
for(j = 0; j < 4; j++) {
addColorPalette(paletteSets[j], colorSets[j]);
}
|
cs |
addColorPalette(palette, colors)라는 함수는 palette(색들을 넣을 요소)와 colors(색상들 세트)를 입력받아 화면에 만들어주는 역할을 한다.
8-9) for문을 이용해 색상의 개수만큼 colorDiv를 생성한다. colors.length를 사용해서 색상 배열의 길이를 신경쓰지 않아도 되고, 수정을 하고싶을 때에도 위의 colorSet1에서 변경해주기만 하면 된다.
10) css를 위한 class를 추가하고
11) 배경색을 설정한다.
12) 각각 colorDiv.addEventListener를 통해 클릭한 색깔로 strokeStyle을 바꿀 수 있도록 한다.
13) 마지막으로 appendChild를 통해 만들어진 colorDiv를 palette.appendChild를 통해 넣어주면 된다.
19-20) addColorPalette함수를 for문을 이용해 palette의 수만큼 반복해서 화면에 나타나도록 한다.
결과
script 적용 전
script 적용 후
각각의 palette 안에 색상들의 수만큼 colorDiv가 생성되었고, stroke의 색도 변경됨을 확인할 수 있다.