Maxima's Lab

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

안녕하세요, 오늘은 Vue.js 프레임워크를 설치하고 실행하는 방법에 대해서 알아보겠습니다. 먼저, Vue.js를 설치하기 전 Node.js를 필수적으로 설치해야합니다. https://nodejs.org/en/download Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 링크를 통해 node.js를 설치 후 다음 명령어를 통해 설치된 Version을 확인합니다. node -v node.js 설치 후 이어서 Vue.js를 다음 명령어를 통해 설치합니다. npm install vue Vue 설치 후 이어서 Vue Cli를 설치합니다. npm install -g @vu..