Amada Coding Club

2023.01.10 - [Front-End/VanillaJs] - [VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-지우기 [VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-지우기 지난 시간에는 그림판의 그리는 과정을 나타냈고 [VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-그리기 패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그 amadaclub.tistory.com 이 편에 이어서 이젠 그린 그림을 이미지로 저장하는 방법을 알아보자 방법은 쉽다. 먼저 a태그를 이용한다. 그리고 JS에 a태그를 가지고 온 후 a태그의 href 값에 다음과 같은 함수를 입력한다. downloadEl.href = this.canvasEl...

지난 시간에는 그림판의 그리는 과정을 나타냈고 [VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-그리기 패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다. 코드에선 클래스를 사용했기 때문에 this문을 사용함. amadaclub.tistory.com 오늘은 그림판의 지우기 기능을 넣어보고자 한다. 나는 뭐 지우는 과정에 무슨 이전 그리기 과정을 불러와서 그려진 부분을 인식하고 클릭한 영역 내에 있는 그림을 지우는 이런 복잡한 과정을 거치는 줄 알았다. 근데 그냥 캔버스의 배경색으로 덮는 거였다 ㅋㅋㅋㅋ this.context.strokeStyle = this.eraserColor; //배경색으로 덮어버림..

패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다. 코드에선 클래스를 사용했기 때문에 this문을 사용함. 본인 코드에 맞게 적절히 수정하길 참고: El로 끝나는 값-HTML태그 캔버스 작업을 하기 위해선 먼저 캔버스의 context를 가지고 와야 한다. context = 캔버스엘리먼트.getContext('2d와 3d 선택가능'); context는 2d와 3d 선택이 가능하다. 즉, 일반적인 2d작업뿐만 아니라 3d작업도 가능하다는 말! context를 가지고 왔다면 이제 canvas에 이벤트리스너를 등록한다. 그림판에 그림을 그릴 때 나오는 이벤트(행위)는 다음과 같다. 1. 그림판에 마우스를 누르면 그리기 시작(m..