Toy Project

[HTML, CSS, JavaScript]그림판 만들기[2]

저번 까지는 선의 굵기 까지 정의했지만, 브러쉬의 모양을 바꿔보고 싶었습니다. 지금은 직선으로 그림을 그리지만, 원으로도 그림을 그릴수 있었으면 좋을것 같아 만들어보려고 합니다. 버튼 두개를 만들어주고 어떻게해야할까 고민을 해보았습니다. 변수를 만들어 줘야하나..? 직접 이벤트 리스너로 해줘야하나 고민이 들었습니다. 고민 오래해도 제가아는 정보에 한해서라면 빠른답이 나오지않으니 일단 아는대로 생각한대로 만들어 보겠습니다. 선 굵기 +1 -1 10 브러쉬 모양 / O let canvas = document.getElementById('canvas'); let brush = canvas.getContext("2d"); let pastMouseX = 0 let pastMouseY = 0 let isDraw =..

[HTML, CSS, JavaScript] 그림판 만들어 보기[1]

기본 적인 html, css를 공부하는데 예제로 그림판이 나와서 직접 만들어 볼겁니다. 제가 만들면서 작성을 하고 있음으로, 사족이 많고, 제가 해본 코드들이 다~~~정리될 것으로 예상됩니다. 태그에 대해 공부를 하고 있었죠. 근데 아래쪽에 다운로드 관련한 설명의 예시로 그림판이 나오는 것입니다. 그리고 노마드 코더에서도 그림판을 만드는 예시가 있던걸 알고 있어서, 직접 영상을 보지않고, 만들어진걸 찾아보지 않고 만들어 보자! 라는 생각이 들었습니다. 참고하는 예시는 오직 https://developer.mozilla.org/ko/docs/Web/HTML/Element/a 이 사이트 에서만 참고를 하였습니다. 새로운 프로젝트를 만들고 예시에 나와있는 스크립트를 가져다가한번 실험을 해보았고 점차 제가 만들..