[TIL] 200310, Tue: JS로 Painting board 제작 2 (Canvas태그로 픽셀조작 - 브러쉬사이즈 변경, 모드변경,이미지 저장하기 )
Done today
- 밀린 TIL정리
- 페인팅보드 완성
New learning
1. Canvas에 브러쉬사이즈 조절 기능 추가
html 에 input 타입 중 range를 이용해서 브러쉬의 최대값, 최소값, 디폴트값, 조절간격을 설정해뒀었다.
그걸 캔버스로 옮기기 위해서는 range에 대한 이벤트리스너를 이용한다.
const range = document.getElementById("jsRange");
ctx.lineWidth = "2.5";
//linewidth: 선굵기 input range로 만들고 기본값을 2.5로 설정했었음
function handleRangeChange(event) {
const size = event.target.value;
ctx.lineWidth = size;
}
if (range) {
range.addEventListener("input", handleRangeChange);
}참고1: range에 대한 이벤트리스너 실행은 "input"으로 한다.
참고2: ctx.lineWidth -> 캔버스에서 선의 굵기조절
2. 채우기 / 페인팅 모드 변경 기능
모드 변경 기능 로직
기능: MODE 라는 버튼을 화면에 만들고 버튼을 클릭할때마다 두가지 모드 Fill과 Paint가 번갈아 나타나는 버튼을 만든다. 모드가 Fill일때는 컬러를 선택 후 캔버스를 클릭하면 전체 화면이 채워진다.
모드를 paint로 변경하면 다시 그리기 모드로 바뀐다.
- 버튼 클릭하면 바뀌는 기능 구현
이벤트리스너와 조건문을 활용하여 innerText가 바뀌게 함.
const mode = document.getElementById("jsMode")
let painting = false;
let filling = false;
function handleModeClick(event) {
if (filling === true) {
filling = false;
mode.innerText = "Fill";
} else {
filling = true;
mode.innerText = "Paint";
}
}
if (mode) {
mode.addEventListener("click", handleModeClick);
}- 캔버스를 클릭했을때 색이 채워지는 이벤트리스너 추가하기
function handleCanvasclick(event) {
if (filling) {
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
}
}
if(canvas){
canvas.addEventListener("click", handleCanvasclick);
}
변수 filling이 참일때만 캔버스를 클릭했을때 채우기 기능이 실행되고
거짓일때는 원래대로 painting 기능이 실행된다.
참고: ctx.fillReact(x축기준점, y축기준점, width, height ) 캔버스에서 사각형 채우기
3. 이미지 저장하기 기능
이미지 저장 로직
1. canvas의 데이터를 이미지 url로 얻기
2. 링크 태그 생성해서 이미지 url 값 주기
3. 다운로드될 이름 설정 / fake click을 줘서 버튼을 클릭 시 저장되도록함.
const saveBtn = document.getElementById("jsSave");
function handleSaveClick() {
const image = canvas.toDataURL();
const link = document.createElement("a");
link.href = image; //다운받을 url
link.download = "Paint🎨"; //다운로드 이름
link.click();
}
if (saveBtn) {
saveBtn.addEventListener("click", handleSaveClick);
}Feelings & Thoughts
이번 paint board 구현하는건 꽤나 통일된 방식의 코딩을 반복하는거였어서 몇까지 신경써야하는 부분만 빼면 수월하게 공부 한 것같다.
특히 자바스크립트 일자무식자에서 이제 조금은 감이 잡힌 느낌이라고 해야하나. 니코의 코딩루틴이 정말 깔끔하고 또 규칙이 있어서 코딩 잘하는 사람의 패턴을 내몸에 체득하는 시간이었다. 물론 그래봤자 혼자 다시 한다면 뚝딱이가 되겠지만....🙉
자바스크립트가 조금 눈에 익은 지금은 오히려 css가 문제다.
지난번에 만든 모멘텀 시계를 css로 좀 만져야하는데 엄청 기본적인 것들이 생각이 안나고 어떻게 해야하는지 감이 안잡혀있다는게 느껴졌다. 어쩔때는 위드값을 줘야하고 이때는 포지션 뭘 써야하고 등등.. 뒤죽박죽.
세세하게 디자인 측면을 생각해야하는 css가 생각보다 복명이다. 흑흑..
하지만 프론트엔드 개발자는 장인정신의 마음으로 html부터 css, javascript를 한땀 한땀 만들어나갈줄 알아야하는법.
다음순서는 파이썬 기초강의를 들으면서 다시 백투더 베이직으로 돌아가서 css를 좀 파볼까 한다. 사실 html / css를 많이 공부했다고 할 수도 없는게 생활코딩, 코드카데미 기초, 카톡클론 강의 듣고 공부한게 전부니까말이다. 암튼 고고!
(근데 무슨 TIL 포스팅 하나 하는데 한시간이 걸리냐...휴)
To-do tomorrow
파이썬 기초 강의 시작
