실시간 협업 그림판 만들기 (3) 썸네일형 리스트형 실시간 협업 그림판 만들기 02 - 그림판 구현하기 02. 그림판 만들기(2) 그림판 구현 03 - 그림판 만들기2이미지 넣기이미지 파일을 넣을 수 있는 input 을 만들어줍니다.img input 에는 비디오도 넣을 수 있기 때문에, 파일 타입을 설정해줍니다.```html```이젠 자바스크립트에서 사진요소를 불러오고,```javascriptconst fileInput = document.getElementById("file");```불러온 파일을 다음 순서로 가공합니다.1. 발생된 이벤트의 그림데이터를 가져옵니다.2. 그림데이터의 url을 만듭니다.3. 새로운 이미지 변수를 만들어 url을 할당해줍니다.4. 이미지 요소의 값을 null로 만들어줍니다.```javascriptfunction onFileChange(event) { const file = event.target... 실시간 협업 그림판 만들기 02 - 그림판 구현하기 02. 그림판 만들기 그림판 구현 02 - 그림판 만들기선 긋기마우스 클릭 이벤트로 선 긋기 마우스의 클릭 이벤트를 감지해서 클릭한 점들을 선으로 연결해줍니다. onClick function 내부에서 event의 console.log를 확인해보면 클릭의 위치가 offsetX, offsetY로 표현되어 데이터가 보내진다는 것을 알 수 있습니다. 완성 코드 ctx.lineWidth = 2; ctx.moveTo(0, 0); function onClick (event) { ctx.lineTo(event.offsetX, event.offsetY); ctx.stroke(); } canvas.addEventListener( "click", onClick )마우스 무브 이벤트로 선 긋기 마우스가 움직일 때 마다.. 실시간 협업 그림판 만들기 01 - 그림판 구현하기 01. CANVAS 이해하기 그림판 구현 01 - CANVAS 라이브러리 기본 알아보기CANVAS Library참고자료 01 - CANVAS 라이브러리 공식문서참고자료 02 - 무료강의캔버스 라이브러리 공식문서와 무료강의의 내용을 통해 그림판 그현을 공부해보았습니다.Live Server, Live Preview자바스크립트의 실행화면 확인을 위한 익스텐션을 설치해주세요!html 파일에서 마우스 우클릭 -> Open with live Server를 이용하면 새로고침 없이 코드가 변할때마다 실시간으로 바뀌는 화면을 볼 수 있습니다.기본 구현우선 index.html, style.css, app.js 파일을 준비합니다.index.html!를 입력하면이렇게 나오는데 이때, !를 클릭하거나 enter 혹은 tab키를 눌러서 자동완성시킬 수 있습.. 이전 1 다음
