전체 글

Meme Maker 텍스트 삽입하기 - 만들고 싶은 기능 HTML에 element 추가하기 Javascript 에서 element 가져와서 함수추가하기 const textInput = document.getElementById("text") // textInput이 아닌, canvas 자체에 더블클릭시 이벤트 리스너 추가 canvas.addEventListener("dblclick", onDoubleClick); Javascript 에서 함수만들기 function onDoubleClick(evnet){ const text = textInput.value; if (text !== ""){ ctx.save(); ctx.font = "48px serif" ctx.lineWidth = 1; ctx.fill..

Meme Maker 이미지 삽입하기 - 만들고 싶은 기능 먼저 HTML에 Input 태그 추가 (파일 형식, 추가될 수 있는 파일 형식설정) JavaScript 에서 element 불러오고 이벤트리스너 붙여주기 const fileInput = document.getElementById("file") fileInput.addEventListener("change", onFileChange); JavaScript 에서 onFileChange 함수 만들기 function onFileChange (event){ const file = event.target.files[0]; const url = URL.createObjectURL(file); const image = new Image(); image.src =..

인터넷과 네트워크 1) HTTP(Hyper Text Transfer Protocol) - HTTP(Hypertext Transfer Protocol)은 웹 브라우저가 웹 서버와 대화하기 위한 프로토콜이다. 사용자가 웹 페이지를 방문하려 할 때, 그들의 웹 브라우저(클라이언트)는 웹 서버에 웹 페이지의 내용을 요청해야 한다. 웹 서버는 그 요청에 응답하기 위해 요청을 해석하고, 요청된 페이지를 클라이언트에게 돌려보낸다. HTTP는 이 과정을 용이하게 해주며, 요청을 보내고 받는 표준적인 방법을 정해준다. 2) GET과 POST 요청 - 사용자가 웹 브라우저에 URL을 입력해 웹 페이지를 요청하면, 웹 브라우저는 GET 요청이라는 특정한 유형의 HTTP 요청을 보낸다. GET 요청은 단어 GET으로 시작되고..

펜의 굵기 정하기 -만들고 싶은 기능 html에 먼저 input을 만들어준다. input의 종류는 range 가장 작은 값은 1, 큰 값은 15로 설정해주었고 기본값은 5로 주었다. JS에서 html의 input값을 가져온다. const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); //값 가져오기 const lineWidth = document.querySelector("#line-width"); ctx.lineWidth = lineWidth.value; 그다음에 값이 바뀔때마다 적용시킨다. lineWidth.addEventListner("change", onLineWidthChange); // event에..

그림판 만들기 - 만들고 싶은 기능 먼저 마우스를 움직일 때마다, 캔버스 좌표가 계속 움직여야 한다. 따라서 움직일 때마다 시작점이 바뀌는 함수를 만들어준다. canvas.addEventListner("mousemove", onMove); function onMove(event) { ctx.moveTo(event.offsetX, event.offsetY); } 마우스를 클릭하면서, 마우스를 움직이면 그림이 그려지는 것이므로, 클릭이 됐다는 신호가 주어지면 mousemove 콜백함수에서 그림이 그려져야한다. 먼저, 클릭이 되면 신호가 주어지고 클릭이 떨어지면 신호가 없어지는 함수를 만들어준다. canvas.addEventListener("mousedown", onMouseDown); canvas.addEv..

집 만들기 - 만들고 싶은 기능 혼자서 집을 만들어 봤다.. moveTo(x좌표, y좌표) : x좌표, y좌표로 이동 lineTo(x좌표, y좌표) : x좌표, y좌표로 이동하면서 그리기 stroke() : 선긋기 fillRect(x좌표, y좌표, 너비, 높이) : 사각형 그리기 stokeRect(x좌표, y좌표, 너비, 높이) : 테두리만 있는 사각형 그리기 lineWidth = "설정값" : 선의 굵기 설정하기 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 700; canvas.height = 700; ctx.fillRect(200, 200, 40, 200); ctx..