Maxima's Lab

안녕하세요, 오늘은 Vue.js 프레임 워크를 사용해서 간단판 그림판 기능을 구현하는 방법에 대해서 알아보겠습니다. 간단한 그림판 기능을 구현하기 위한 항목들은 다음과 같습니다. Canvas 그리기 모두 지우기 Pen 두께 증가 Pen 두께 감소 Vue.js 프레임워크를 활용하기 위해 프로젝트를 생성해줍니다. 생성된 프로젝트 내 src/App.vue 파일을 다음과 같이 수정해줍니다. 모두 지우기 두껍게 얇게 위의 코드의 결과로 실행한 초기 화면 결과는 다음과 같습니다. 위에서 모두 지우기, 두껍게, 얇게 버튼에 대한 기능 동작에 대한 script 코드에 대해서 자세히 설명드리겠습니다. 3가지 버튼에 대한 설명에 앞서, Canvas 위에 Pen으로 그리는 기능에 대한 설명입니다. initCanvas() {..