[javascript] 캔버스(Canvas)로 그림판 만들기(2) 선 색상, 굵기 바꾸기

[javascript] 캔버스(Canvas)로 그림판 만들기(1) 캔버스에 선그리기

 

 

 

 

 

선 색상 바꾸기

 

 

 <div class="controls__colors" id="jsColors">
        <div class="controls__color jsColor" style="background-color: #2c2c2c"></div>
        <div class="controls__color jsColor" style="background-color: white"></div>
        <div class="controls__color jsColor" style="background-color: #ff3b30"></div>
        <div class="controls__color jsColor" style="background-color: #bb853a"></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>

 

 

 

html파일에서 각각의 색상 팔레트에 jsColor라는 클래스를 추가한다.

 

 

 

 

 

js파일에 클래스를 color라는 변수로 가져온다.

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

 

 

 

 

array.from ()

array.from 메서드는 object로부터 새로운 array를 만든다.

 

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

 

 

jsColor라는 이름의 클래스를 가진 9개의 색상 팔레트들이 array의 원소들로 출력되어 나오는 것을 볼 수 있다.

 

 

 

 

 

forEach()

 

 

forEach() 메서드는 주어진 함수를 배열 원소 각각에 대해 실행한다. 

 

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

 

 

새로 만든 array안의 각각의 color 원소에 대해 addEventListener를 호출한다.

색상들을 click할때마다 handleColor함수가 실행된다.

 

(여기서 color는 array안에 있는 각각의 아이템들을 표시하는것으로, 어떤 이름이든 상관 없다.)

 

 

 

function handleColor(event){
    const color = event.target.style.backgroundColor;
    ctx.strokeStyle = color; //stokeStyle을 override
}

 

default 검은색으로 지정된 strokeStyle을 target으로 받아온 color로 override한다.

 

 

 

 

 

 

=> 클릭한 color 팔레트의 색상에 따라 선 색깔이 다르게 그려지는 것을 볼 수 있다.

 

 

 

 

 

---

 

 

선 굵기 바꾸기

 

 <div class="controls__range">
        <input
          type="range"
          id="jsRange"
          min="0.1"
          max="5.0"
          value="2.5"
          step="0.1"
        />
      </div>

 

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

 

 

html에서의 input 태그 안 id(jsRange)를 가져온다. 

 

 

 

 

if(range){
    range.addEventListener("input", handleRangeChange);
}

range 이벤트는 input에 반응한다.

 

 

 

function handleRangeChange(event){
    const size = event.target.value;
    ctx.lineWidth = size;
}

 

event.target의 value를 가져와 range 값을 선 굵기로 지정해준다.

 

 

 

 

=>range 값에 따라 선의 굵기를 조정할 수 있다.