개발자입니다

-그림 파일 추가 accept="image/*" : 이미지 파일만 허용한다. video 등도 가능하며 .pdf 등으로 확장자 제한을 걸 수도 있다. multiple 속성 추가시 여러 파일을 등록할 수 있다. // index.html 추가 const fileInput = document.getElementById("file"); function onFileChange(event) { console.dir(event.target); } fileInput.addEventListener("change", onFileChange); 콘솔 확인은 다음과 같다. 브라우저의 자바스크립트는 유저의 파일을 읽을 수 없다. 유저가 선택했을 때 메모리에 있게 된다. 그러면 브라우저가 파일을 활용할 수 있다. 메모리에 있는 파..

-클릭시 x, y 좌표 얻어내기 아래 코드로 콘솔에서 클릭 위치 얻어낼 수 있다. function onClick(event) { console.log(event); } canvas.addEventListener("click", onClick); 클릭시마다 (0, 0) 에서 시작되는 직선을 그릴 수 있다. ctx.lineWidth = 2; function onClick(event) { ctx.moveTo(0, 0); ctx.lineTo(event.offsetX, event.offsetY); ctx.stroke(); } canvas.addEventListener("click", onClick); addEventListener에서 "click"을 "mousemove"로 바꾸면 이렇게 나온다. function ..

태그 : js로 그래픽 그릴수 있게 하는 API /* style.css */ canvas { width: 800px; height: 800px; border: 5px solid black; } body { display: flex; justify-content: center; align-items: center; } // app.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 2d 그림 그리기 위해 canvas.width = 800; canvas.height = 800; // 기본 세팅 fillRect(x 시작위치, y 시작위치, 너비, 높이) ctx.fillRect(50, 50, 100,..

VS code에서 ! + 엔터시 html에 필요한 코드 자동으로 나온다. VS code에서 Live Server 설치 - 우하단 Go Live 클릭 - index.html 파일 생성해야 자동 업데이트 /* style.css */ body { background-color: turquoise; } // app.js alert('Hello');