sonsurim.github.io

Painting Board - Personal

프로젝트 개요

• 제목 : canvas를 활용한 그림판 웹사이트

• 기간 : 2019.07.17 ~ 2019.07.23

• URL : https://sonsurim.github.io/paintingBoard/index.html

• 개발 환경 : HTML, CSS, JavaScript, VScode, Git

• 프로젝트 목표와 내용

  • 목표 : HTML, CSS, JavaScript 기본 이해도와 실력 향상
  • 내용 : Vanilla JavaScript와 HTML Canvas를 활용하여 작업한 그림판 웹 사이트입니다.

• 프로젝트 진행 시 문제점 : Canvas에 대한 낮은 이해도로 인하여 JavaScript 활용에 있어 문제점을 겪었습니다.

• 프로젝트 문제점 해결 방법 : 문제점 해결을 위한 구글링과 Canvas에 대한 공부로 문제점을 극복할 수 있었습니다.

• 느낀 점 및 배운 점 : 공부할 내용은 많고 시간이 지나서 코드와 사이트를 다시 봤을 때, 계속해서 개선하고 싶은 점이 많은 사이트였습니다. Canvas와 JavaScript 기본에 대해서 많이 배웠으며 간단하면서 동적인 웹 사이트를 만들 수 있는 것에 하루하루 재미를 느꼈던 프로젝트였습니다.

프로젝트 소스 코드

페이지의 전역 변수들입니다.

페이지의 일부 소스코드입니다. 해당 페이지는 이벤트 핸들러가 많이 사용된 페이지이기 때문에
페이지의 로드와 함께 함수 init을 실행해줌으로써 이벤트 핸들러들을 한 번에 초기화해 주었습니다.

페이지의 이벤트 핸들러 부분입니다.

프로젝트 구현 이미지

range 바를 이용하여 붓의 크기를 설정할 수 있으며 toggle 버튼인 fill-paint 버튼을 이용하여 그림을 그릴 수 있고 배경색을 채울 수 있습니다.
하단의 컬러 팔레트를 이용하여 색을 변경할 수 있게 구현해두었습니다.