본문 바로가기

TIL -일간학습기록/클론코딩2

그림판만들기 21.12.16 canvas태그를 사용해 마우스로 그림그릴 부분을 만들고 range로 붓의 두께를 조절하기위한 부분 Fill,Save 기능구현을 위한 버튼 두가지 10가지의 컬러를 고를수있도록 준비해두었다. 목업중 깃헙에 잔디심으면 좋을거 같아서 급 init > add > commit 했지만 레포지토리가 없어서 push가 안되었고, 이문제를 해결하기 위해 1시간가량 검색해 해결했다ㅎㅎ 오류사항은 오류해결에 따로 작성할것! 이과정을 통해 얻고 싶은것.. 1. 그림판을 만들며 가장 공부하고 싶은부분은 함수의 사용법과 이벤트 핸들러 사용법에 대한 숙지 레퍼런스 없이 구현해보는 것에 초점을 맞춰야 겠지만... 조금은 참고할예정(캔버스에 그림이 그려지는 과정이 이해가 잘안가서...) 2. HTML의 여러 attribute를 사용.. 2021. 12. 17.

바닐라JS로 그림판만들기(feat.니꼬쌤) 이번 주말에 니꼬쌤 강의 보고 따라만든 그림판 컬러칩을 누르면 해당컬러로 펜이 변하고, Range로 펜의 두께를 조절할수있고, Fill/Paint로 캔버스에 도배하거나 그림을 그릴수있게 했다. 펜을 캔버스내에서 움직일때 X,Y의 좌표를 따라 픽셀에 컬러가 이어지게 하는게 어려웠다. Save 기능은 마우스 오른쪽버튼의 기능을 숨긴뒤 버튼에서 저장하는방법으로 제작했다. HTML의 Canvas 로 제작함. 내 기여도 1% ... 이제 안보고 따라 해야지 2021. 12. 15.

이전 1 다음

티스토리툴바